YouTube/Vimeos可以根据宽度(CSS)调整高度吗？

Question

我使用标准的Youtube嵌入代码,如:

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

我添加iframe { width: 100%; }了style.css并且它可以工作(它的新宽度是最大800px),但它不适应高度... height: auto;并height: 100%;使其像100px高或720px高(太高).

有没有什么方法可以让YouTube视频在响应式容器中保持16:9的宽高比(可以有1px到800px的任何宽度)？

Answer 1

那么你的宽度和高度可能会被iFrame的width和height属性覆盖.如果你取出静态宽度和高度,它应该正确响应.

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

请注意iframe中没有width ="XXX"或height ="XXX".

有关更多信息,请查看此文章.