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

Question

I used standard Youtube embed code like:

<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%; } in style.css and it works (its new width is max 800px) but it doesn't adapt height... height: auto; and height: 100%; make it like 100px high or 720px high (far too high).

Is there any way that YouTube video could always maintain 16:9 aspect ratio in responsive container (that can have any width from 1px to 800px)?

Solution

Well your width and height are probably being overwritten by the width and height attributes of the iFrame. If you take out the static width and height then it should respond correctly.

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

notice there is not width="XXX" or height="XXX" in the iframe anymore.

Check out this article for more information.

Comments

[Atadj]

Nope. That doesn't do the trick. I tried this, too. Nothing changes. Thank you for your answer though!

[Atadj]

However, I just tested this and it works! amobil.se/2011/11/responsive-embeds

[CaldwellYSR]

Did you read the article? I just gave it a quick glance but it looked like it was the exact same issue.

[Atadj]

Yes, the article suggests putting absolute positioned video in container with padding-bottom: 56.25% (16:9 aspect ratio). It works this way! :) Thanks!

[CaldwellYSR]

Great, I'm glad it worked for you :)

[Vignesh Chinnaiyan]

You can watch this Youtube iframe Example for best understanding @ http://alistapart.com/d/creating-intrinsic-ratios-for-video/‌​example4.html