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
where the image file contains its fixed aspect ratio,
which the browser uses to lay out the image appropriately.
<iframe>s don’t have a fixed aspect ratio,
<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:
which simplifies to a 16:9 aspect ratio.
Can we tell the browser to display an
width: 100%; aspect-ratio: 16:9;?
There is no
aspect-ratio property, but we can do this with CSS.
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, which is proportional to its own width.
<div style="padding-top: 56.25%;background-color: yellow;"></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
<div style="padding-top:56.25%;background-color: yellow;"> <iframe src="https://www.youtube.com/embed/nckseQJ1Nlg" frameborder="0" allowfullscreen style="width:100%;height:100%;"></iframe> </div>
Oh no, that’s not right at all!
<iframe> is not the right height,
and it’s not positioned correctly.
We can fix these with the
<div style="position:relative;padding-top:56.25%;"> <iframe src="https://www.youtube.com/embed/nckseQJ1Nlg" frameborder="0" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe> </div>
That’s it: a full-width
<iframe> with fixed aspect ratio. Enjoy.
I wrote this because I felt like it. This post is not associated with my employer. This site is hosted by Netlify (who are great, but I'm not associated with them either).