jquery - 创建一个 16 :9 aspect ratio iframe based on browser size (percentage)

Question

如何将 iframe 大小(在我的例子中 - featherlight iframe playing youtube)设置为浏览器窗口的百分比？

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

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

任何 jsfiddle 示例(或代码笔)都会有很大帮助。我尝试了很多不同的方法 - 但 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

在现代浏览器中，您可以使用 aspect-ratio css 属性:

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

和CSS:

iframe {
  aspect-ratio: 16 / 9;
  width: 100%; /* change this to a fixed width, or create a container with a width. */
  height: 100%;
}

https://caniuse.com/mdn-css_properties_aspect-ratio

如果您添加一个包装器 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%;
}