Skip to content

Instantly share code, notes, and snippets.

@fcalderan
Last active August 29, 2015 14:23
Show Gist options
  • Save fcalderan/c868b13badace6638e29 to your computer and use it in GitHub Desktop.
Save fcalderan/c868b13badace6638e29 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
section {
width: 35%;
}
section div {
/* Aspect ratio: 16:9 */
height: 0;
width: 100%;
position: relative;
padding-bottom: 56.25%;
}
section div > :first-child {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
}
<section>
<div>
<video controls>
<source src="http://www.808.dk/vstreamer.asp?video=gizmo.mp4" />
</video>
</div>
<!-- see the demo at http://sassmeister.com/gist/c868b13badace6638e29 -->
</section>
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
@mixin ratio($arw, $arh) {
/* Aspect ratio: #{$arw}:#{$arh} */
height: 0;
width : 100%;
position: relative;
padding-bottom: unquote("#{(round((100*$arh/$arw)*100))/100}%");
> :first-child {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
}
}
section {
width: 35%;
div {
@include ratio(16,9);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment