我怎样才能使 YouTube 播放器缩放到页面宽度，同时保持纵横比？

Question

我有一个 YouTube 视频要放在我的网页上。

我想缩放视频以适应一定比例的用户浏览器，同时保持纵横比。

我试过这个：

 <iframe width="87%" height="315" src="http://www.youtube-nocookie.com/embed/dU6OLsnmz7o" frameborder="0" allowfullscreen></iframe>

但这只会让玩家更宽，而不是更高。

我必须求助于 JavaScript（或非标准 CSS）吗？

原文由 Frank 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在开发一些响应式 CSS 时，我的网站遇到了类似的问题。当从桌面 CSS 切换到更小的东西（我使用媒体查询为移动设备重新呈现内容）时，我希望任何嵌入式 Youtube 对象都可以调整大小。

我确定的解决方案是基于 CSS 和标记的。基本上，我的 CSS 中有三个视频类：

 .video640 {width: 640px; height: 385px}
.video560 {width: 560px; height: 340px}
.video480 {width: 480px; height: 385px}

……我将其中一个分配给我包含的 Youtube 内容，具体取决于它的原始大小（你可能需要更多类，我只是选择了最常见的大小）。

在小型设备的媒体查询 CSS 中，这些相同的类被简单地重述如下：

 .video640 {width: 230px; height: 197px}
.video560 {width: 230px; height: 170px}
.video480 {width: 240px; height: 193px}

我很欣赏在 HTML 中包含视频时需要一些“预先”标记（即添加类），但是如果您不想走 Javascript 路线，这很有效——您可以重新-根据需要为不同大小的视频分类。 Youtube 标记的外观如下：

 <object class="video640" type="application/x-shockwave-flash" value="YOUTUBE URL">
  <param name="movie" value="YOUTUBE URL"></param>
</object>

原文由 Ben 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我认为最好的 CSS 解决方案。

 .auto-resizable-iframe {
  max-width: 420px;
  margin: 0px auto;
}

.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 75%;
  height: 0px;
}

.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

 <div class="auto-resizable-iframe">
  <div>
    <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
  </div>
</div>

演示 http://jsfiddle.net/46vp592y/

原文由 Darwin 发布，翻译遵循 CC BY-SA 4.0 许可协议