js-flex-embed
Version:
jQuery Plugin for responsive intrinsic ratio embeds
85 lines (77 loc) • 2.1 kB
CSS
/* ==========================================================================
Flex-Embed
Based on
https://github.com/inuitcss/inuitcss/blob/develop/objects/_objects.ratio.scss
and
https://github.com/suitcss/components-flex-embed
========================================================================== */
/**
* Create ratio-bound content blocks, to keep media (e.g. images, videos) in
* their correct aspect ratios.
*
* http://alistapart.com/article/creating-intrinsic-ratios-for-video
*
* 1. Default cropping is a 1:1 ratio (i.e. a perfect square).
*/
/* line 29, ../../src/js-flex-embed.scss */
.o-flex-embed {
position: relative;
display: block;
overflow: hidden;
}
/* line 35, ../../src/js-flex-embed.scss */
.o-flex-embed__ratio {
content: "";
display: block;
width: 100%;
padding-bottom: 100%;
/* [1] */
}
/* line 43, ../../src/js-flex-embed.scss */
.o-flex-embed__content,
.o-flex-embed__content > iframe,
.o-flex-embed__content > embed,
.o-flex-embed__content > object {
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
/* line 55, ../../src/js-flex-embed.scss */
.o-flex-embed__crop-item {
position: absolute;
left: -10000px;
top: -10000px;
bottom: -10000px;
right: -10000px;
margin: auto;
width: 100%;
height: auto;
}
/* Ratio variants.
========================================================================== */
/**
* Generate a series of flex-embed classes to be used like so:
*
<div class="o-flex-embed">
<div class="o-flex-embed__ratio o-flex-embed__ratio--16:9"></div>
<div class="o-flex-embed__content">
<!-- child content -->
</div>
</div>
*
*/
/* line 91, ../../src/js-flex-embed.scss */
.o-flex-embed__ratio--2\:1 {
padding-bottom: 50%;
}
/* line 91, ../../src/js-flex-embed.scss */
.o-flex-embed__ratio--4\:3 {
padding-bottom: 75%;
}
/* line 91, ../../src/js-flex-embed.scss */
.o-flex-embed__ratio--16\:9 {
padding-bottom: 56.25%;
}