4

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)?

Atadj
  • 7,050
  • 19
  • 69
  • 94

1 Answers1

5

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.

CaldwellYSR
  • 3,056
  • 5
  • 33
  • 50
  • Nope. That doesn't do the trick. I tried this, too. Nothing changes. Thank you for your answer though! – Atadj Jul 26 '12 at 15:55
  • 1
    However, I just tested this and it works! http://amobil.se/2011/11/responsive-embeds/ – Atadj Jul 26 '12 at 15:57
  • Did you read the article? I just gave it a quick glance but it looked like it was the exact same issue. – CaldwellYSR Jul 26 '12 at 15:57
  • Yes, the article suggests putting absolute positioned video in container with padding-bottom: 56.25% (16:9 aspect ratio). It works this way! :) Thanks! – Atadj Jul 26 '12 at 15:58
  • Great, I'm glad it worked for you :) – CaldwellYSR Jul 26 '12 at 16:01
  • You can watch this Youtube iframe Example for best understanding @ [http://alistapart.com/d/creating-intrinsic-ratios-for-video/example4.html](http://alistapart.com/d/creating-intrinsic-ratios-for-video/example4.html) – Vignesh Chinnaiyan Jun 04 '16 at 12:06