Home/ Questions/Q 8297793
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T15:32:32+00:00

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

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0