html - 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 中添加了它，它可以工作（它的新宽度最大为 800 像素），但它不适应高度......height: auto;并height: 100%;使其像 100 像素高或 720 像素高（太高了）。

有什么方法可以让 YouTube 视频在响应式容器中始终保持 16:9 的纵横比（宽度可以从 1px 到 800px）？

Answer 1

那么您的宽度和高度可能会被 iFrame 的宽度和高度属性覆盖。如果您取出静态宽度和高度，那么它应该正确响应。

<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" 了。

查看这篇文章了解更多信息。