Learn more about Russian war crimes in Ukraine.

How do I make a full-width iframe with fixed aspect ratio?

I wanted to embed a YouTube <iframe> in a webpage. I wanted it to be full-width (that is, width: 100%), but keep the normal YouTube aspect ratio. I wanted it to behave like an <img>, where the image file contains its fixed aspect ratio, which the browser uses to lay out the image appropriately.

Unlike <img>s, <iframe>s don’t have a fixed aspect ratio, because <iframe>s embed web pages, which don’t have fixed/known aspect ratios. But for the particular case of YouTube videos, there is a fixed aspect ratio we want: the standard <iframe> has width="560" height="315", which simplifies to a 16:9 aspect ratio. Can we tell the browser to display an <iframe> at width: 100%; aspect-ratio: 16:9;?

There is no aspect-ratio property, but we can do this with CSS. The 16:9 aspect ratio corresponds to a height which is 56.25% of the width. To make a CSS box which is 56.25% of its own width, we can use the padding-top property with a percentage. The percentage is proportional to the width of the parent element, so first, we create a parent element to define the width, then insert a child element to define the height. Like this:

<div><div style="padding-top: 56.25%;background-color: yellow;"></div></div>

Next, we put the <iframe> inside this box, making it fill the whole box. To size the <iframe>, we ignore the width="560" height="315" element properties, and instead use the CSS properties width:100%;height:100%;.

  <div style="padding-top:56.25%;background-color: yellow;">
    <iframe src="https://www.youtube.com/embed/nckseQJ1Nlg" frameborder="0" allowfullscreen

Oh no, that’s not right at all! The <iframe> is not the right height, and it’s not positioned correctly. We can fix these with the position attribute:

  <div style="position:relative;padding-top:56.25%;">
    <iframe src="https://www.youtube.com/embed/nckseQJ1Nlg" frameborder="0" allowfullscreen

That’s it: a full-width <iframe> with fixed aspect ratio. Enjoy.

What can computers do? What are the limits of mathematics? And just how busy can a busy beaver be? This year, I’m writing Busy Beavers, a unique interactive book on computability theory. You and I will take a practical and modern approach to answering these questions — or at least learning why some questions are unanswerable!

It’s only $19, and you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

After months of secret toil, I and Andrew Carr released Everyday Data Science, a unique interactive online course! You’ll make the perfect glass of lemonade using Thompson sampling. You’ll lose weight with differential equations. And you might just qualify for the Olympics with a bit of statistics!

It’s $29, but you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

More by Jim

Tagged . All content copyright James Fisher 2017. This post is not associated with my employer. Found an error? Edit this page.