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

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, which is proportional to its own width.

 

 

 

Like this:

<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 width:100%;height:100%;.

<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! 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 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.

Get updates on Twitter

트위터의 James Fisher (@MrJamesFisher) 님

하지만 여기서 가장 중요한 것은 position을 absolute 속성으로 지정하는 경우, 다른 element 의 위치를 침범해버린다. 따라서 다음과 같이 수정한다.

 

<iframe src="https://www.youtube.com/embed/nckseQJ1Nlg" frameborder="0" allowfullscreen style="top : 0px; left:0px; width : 100%; height : 100%;"></iframe>