仅使用 CSS 的响应式视频 iframe（保持纵横比）？

Question

我通常使用与this one 类似的解决方案。比如：

.wrapper {
   position: relative;
   width: 100%;
   height: 0;
   padding-bottom: 56.25%;
}
.wrapper iframe {
   position:absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
}

但这次我无法访问 HTML 或 JavaScript 代码，因此我无法使用包装器来阻止 height:0。

有没有办法只使用 CSS 使 iframe 响应式（并保持比例）？

试过这个（适用于 iframe，但不适用于其内容）：

iframe {
    width: 100%;
    background: red;
    height: 0;
    padding-bottom: 33%;    
}

fiddle

有什么想法吗？无需支持旧浏览器，因此即使是 CSS3 解决方案也很棒。

Answer 1

这是一个基于 CSS2 秘密的解决方案的 Fiddle：https://jsfiddle.net/59f9uc5e/2/

<div class="aspect-ratio">
  <iframe src="" width="550" height="275" frameborder="0"></iframe>
</div>

<style>
/* This element defines the size the iframe will take.
   In this example we want to have a ratio of 25:14 */
.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* The height of the item will now be 56.25% of the width. */
}

/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
</style>

通过如何处理填充的百分比值来解释：

百分比是根据生成框的包含块的宽度计算的，即使对于“padding-top”和“padding-bottom”也是如此。

https://www.w3.org/TR/CSS2/box.html#padding-properties

Answer 2

使用新的CSS viewport unitsvw和vh（视口宽度/视口高度）

FIDDLE

iframe {
    width: 100vw; 
    height: 56.25vw; /* 100/56.25 = 560/315 = 1.778 */
    background:red;  
}

浏览器支持也不错：IE9+ (caniuse)

Answer 3

Calc 功能使其更具可读性：

.iframe-video {
    width: 755px;
    height: 424px;
    max-width: 100%;
    max-height: calc((100vw - 40px) / (16/9));
}

• width 和 height 是桌面的大小，也适用于古代浏览器
• 40px 是边距（iframe 边框和两侧的视口边框之间 20 px）
• 16/9 是视频的比例（如果你有边到边播放器）

Answer 4

使用 css aspect-ratio 很容易。

iframe {
  height: auto;
  width: 100%;
  aspect-ratio: 16 / 9;
}

Answer 5

这有点骇人听闻，但是您可以使用图像来保留视频的纵横比。例如，我去绘画并保存了一张分辨率为 1280 x 720 的图像，以用于 16:9 的纵横比（在这里，我将在某处从互联网上抓取一张空白图像）。

这很有效，因为如果您在保持高度自动的情况下更改图像的宽度，反之亦然，图像将自动缩放 - 保持比例。

img {
  display: block;
  height: auto;
  width: 100%;
}
iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.wrapper {
  float: left;
  position: relative;
}

<div class="wrapper">
  <img src="http://www.solidbackgrounds.com/images/1280x720/1280x720-ghost-white-solid-color-background.jpg" alt=""/>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>

Answer 6

<div>
  <div style="position:relative;padding-top:56.25%;">
    <iframe src="https://www.youtube.com/embed/nckseQJ1Nlg" frameborder="0" allowfullscreen
      style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
  </div>
</div>

请将此样式添加到您尝试加载的网址内容。它将保持 16:9 的纵横比。