Let’s say we have a video which has dimensions of 640 x 360px. When navigate on smaller devices, we want the video to shrink and keep its proportions ; like Responsive images do when setting
- Get the width and height of the original video
- Calculate a ratio (%) = height / width * 100
Chris Coyier and Paravel built few years ago a great and lightweight plugin which does exactly this : FitVids.js.
Keep videos ratio with CSS
The technique was brought by Thierry Koblentz in 2009 in the article : Creating Intrinsic Ratios for Video. The key is to set the padding-top of the parent block of the video in percentage : “Padding property is the magic that styles a box with an intrinsic ratio”.
Indeed, a percentage padding is, by definition, based on the width of the containing block (W3C source). So to have a block that fit the video’s dimensions, we just need a
padding-top set with the video’s ratio :
Next step is to put the video inside the block : easy thing, we add a relative positioning on
.video-wrapper and, inside, an absolute one on the video with a
top:0 to lay the video inside the container :
Dimension attributes and !important
When embdeding videos, the iframe’s integration code provided has dimensions attributes. Working Responsive, we might want to remove them, but it is actually better to keep them because “user agents are expected to use these attributes as hints for the rendering” (source) and then load the iframe quicker.
Unlike images we can’t write
<iframe width="100%" ...> because since HTML5 the width attribute of an
<iframe> can be only in pixels. Also
height="auto" would mean
So I suggest keeping the original dimensions on the iframe (good for the browser) and force it in the CSS (good for the responsiveness) using the
!important keyword - which was specially created to overload inline style attached directly to the element -.