根据浏览器大小（百分比）创建 16:9 纵横比 iframe

Question

如何将 iframe 大小（在我的情况下 - 播放 youtube 的羽毛 iframe）设置为浏览器窗口的百分比？

我有一个可以是任意大小的浏览器，我想将 iframe 宽度设置为浏览器窗口的 80%..

16:9 aspect ratio with fixed width 提到一旦我选择了宽度，如何设置 16:9 的高度。我不明白如何使用它。

任何 jsfiddle 示例（或 codepen）都会有很大帮助。我尝试了很多不同的方法 - 但 iframe 不保持纵横比。

http://codepen.io/anon/pen/zvqQgq

<iframe src="https://www.youtube.com/embed/YAcLViTHDOo" width="50%" class="player" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>

如何将宽度设置为浏览器窗口的 80%，并允许高度为 80% 宽度的 16:9 比例？

Answer 1

如果你添加一个包装器 div，你可以让 CSS 来解决问题：

<div class="fluidMedia">
    <iframe src="" frameborder="0"> </iframe>
</div>
<div class="fluidMedia" style="width:80%;">
    <iframe src="" frameborder="0"> </iframe>
</div>

CSS：

.fluidMedia {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    height: 0;
    overflow: hidden;
}

.fluidMedia iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 2

HTML：

<iframe src="" frameborder="0" class="sixteenByNineFrame"> </iframe>

CSS：

.sixteenByNineFrame{
    width: 80%;
    height: calc(80% / (16/9));
}

我们想要宽度/高度 = 16/9 所以如果我们有 width=80.

那么，高度 = (宽度 / (16/9))