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>

我在 style.css 中添加了 iframe { width: 100%; } 并且它可以工作（它的新宽度最大为 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"。

查看this article了解更多信息。