Geek Answers Handbook

Can YouTube / Vimeos adapt their height to width (CSS)?

I used the standard Youtube embed code, for example:

<div style="width:100%; max-width:800px;"> <iframe width="960" height="720" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe> </div>

I added iframe { width: 100%; } iframe { width: 100%; } in style.css, and it works (its new width is max 800px), but it does not adapt the height ... height: auto; and height: 100%; make it equal to 100px high or 720px high (far too high).

Is there a way that a YouTube video can always support a 16: 9 aspect ratio in a flexible container (can have any width from 1 to 800 pixels)?

+4
source share
1 answer

Well, your width and height are likely to be overwritten by the width and height attributes of the iFrame. If you choose a static width and height, then it should answer correctly.

 <div style="width:100%; max-width: 800px;"> <iframe src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe> </div>

notice that the iframe no longer has width = "XXX" or height = "XXX".

See this article for more information.

+5
source

More articles:


All Articles