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>

我在style.css中添加了iframe { width: 100%; }并且它有效（它的新宽度是最大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”。

查看this article了解详情。

YouTube / Vimeos可以根据宽度（CSS）调整高度吗？

1 个答案: