We live in the future, and one of the benefits of our brave new world is the thousands of cat videos that are just a click away. Let’s say you’ve just found the perfect felicitous feline video to share with all your friends. You post it to your fancy responsive website quick as a flash (because it’s the future and we can do that), but whoops: the video doesn’t fit! It’s too wide, too narrow, or just awkwardly sized.
Let’s fix that.
First off, we’ll need some sort of a wrapper container for our video. We’ll paste our embed code inside this wrapper. It’ll look something like this:
This wrapper will become our responsive container, adjusting to the size of its parent and allowing us to resize the contents within it.
Our goal is to keep the same aspect ratio as the original video embed, while allowing the width and height of the video to change to fit its surroundings. Happily, ratios (aspect or otherwise) are just fancy fractions, fractions are just jumped-up percentages, and percentages are the bread and butter of CSS.
The intuitive approach would be to set our .video container width to 100% and the height to whatever percentage we need to create our ratio. So if we’re embedding a 16:9 video (widescreen), that means we have 16px of width for every 9px of height. Or put percentagely, if our width is 100%, our height needs to be 9/16 of 100%, or 56.25% of the width.
Unfortunately for us, height percentages in CSS don’t work that way. When you set a percentage height in CSS, it’s considered to be a percentage of its parent container, not a percentage of the element’s width. So that height won’t work.
Weird CSS to the Rescue: while height percentages are based on the parent container height, padding percentages are based on the element’s width! And while normally all that padding on our video container would just put padding around our video, if we use absolute positioning to pull the video out of the normal document flow, everything works out just fine.
.video {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
In this example, I’m assuming the video embed is an iframe. As of this writing, YouTube, Vimeo, Vine (you may have heard of them) and many others are using iframe embeds, so this technique will work great for loads of sites.
We’re setting relative position on the .video div so that anything absolutely positioned inside considers .video to be the parent. And then we just tell the iframe to take up all the space available in its parent… which is a box exactly as wide as its container and set to a 16:9 aspect ratio.
It works something like this:
Go ahead and resize your browser. The width and height of the video will adapt to the container.
If you need to support other aspect ratios, just figure out the percentages involved and create classes for those. Vine uses a 1:1 ratio, so the padding-bottom would be 100%. A 4:3 “standard” resolution video would need a height of 75%, and so on.
Go forth and embed!