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

Question

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

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

我试过这个:

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

但这只会让播放器变宽，不会变高。

我必须求助于 JavaScript(或非标准 CSS)吗？

Answer 1

我认为最好的 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/