Preserving aspect ratio for embedded iframes
Update 2021: This has been one of my most read articles for some time. And now I'm happy to proclaim: It's outdated. There's a property in CSS!
All you need:
iframe {
aspect-ratio: 16 / 9;
}
Cheers!
This is the old article
If you want to use videos on your webpage which are hosted on another server (YouTube, Vimeo, whatever), you most likely will use their embedding possibility rather than the HTML5 <video> Tag or a flash plugin hosted on your server. These embedding codes mostly use <iframe>, which is good since they detect all your needs on their site, like in "what format do you need", "use either HTML5 or Flash", or "streaming HD or lower definition for mobile phones". A lot of decisions are taken from you!
However, you will have to specify the size of the iframe. And if your responsive layout scales your content flexibly according to the viewport width rather than fixed widths on breakpoints (like this page), the embedding iframe may look especially bad on smaller screens. Here's a solution to keep the aspect ratio:
I'll use a trailer video from on of our projects. The girl in this video is Tina, one of our developers. The standard embedding code I get from vimeo looks something like this:
<iframe src="http://player.vimeo.com/video/64197060"
width="550" height="281" frameborder="0">
<iframe>
Alright, the cheapest way to achieve resizing according to viewport/content width is by simply adding some CSS for your iframe:
iframe {
width: 100%;
}
And the iframe is as wide as the container you put him in. However, the height can't be controlled that easily. To preserve that aspect ratio, you need a wrapper div, let's call it .aspect-ratio:
.aspect-ratio {
position: relative;
width: 100%;
height: 0;
padding-bottom: 51%;
}
This div is as wide as the content/viewport area, the height is zero. So practically this shouldn't be visible. However. The padding of this one is the height of the video divided through its width, or in other words: the aspect ratio in percent! No matter how much you resize your window, it will always stay in this ratio. So, all you need now is to let the iframe inside flow to each corner of its parent:
.aspect-ratio iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0; top: 0;
}
Since the parent element has no height, we place it absolutely on the top left corner and let the iframe use the space created by the padding.
And voilá:
Resize the window and try it!