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

Posted 2023-03-05

【中文标题】仅使用 CSS 的响应式视频 iframe（保持纵横比）？

【英文标题】：Responsive video iframes (keeping aspect ratio) with only CSS?

【发布时间】：2014-10-07 19:07:51

【问题描述】：

我通常使用与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 解决方案也很棒。

【参考方案1】：

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

<div class="aspect-ratio">
  <iframe src=""   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

【讨论】：

请添加我被否决的原因，以便我改进我的答案。

我在你的 jsfiddle 链接上没有看到结果

"但是这次我无法访问 html 代码或 javascript，所以我不能使用包装器来防止 height:0"

可能值得注意的是，当.aspect-ratio/wrapper 设置了display: grid 时，它将不起作用。使用display: block 就可以了！

比所选答案更灵活，因为这将适应任何容器大小，而不仅仅是视口！

【参考方案2】：

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

FIDDLE

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

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

【讨论】：

@ToniMichelCaubet 我更新了小提琴以去除不必要的滚动条

只有当你想让 iframe 匹配视口大小时才有效。但是，如果您需要适应可用宽度（即 iframe 元素的父元素的内容宽度）的东西，那么您需要查看 SimonSimCity 的答案。

我不喜欢那个解决方案，因为@MikkoRantalainen 说了什么。但我宁愿使用图像（data-uri）来确保纵横比保持正确，而不是使用填充。请参阅 Fly1nP4nda 的回答 + 我对此的评论。或者检查那个小提琴：jsfiddle.net/kfafrz57

@MikkoRantalainen 你总是可以使用width: calc(100vw -20%) 假设它只使用视口宽度的 80%。可能还需要计算高度。

【参考方案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 是视频的比例（如果你有边到边播放器）

【讨论】：

如果你将这个与 CSS iframe 一起使用，它也可以在没有包装 div 的情况下工作，并且可以在所有设备上进行缩放。高度和宽度不再重要，它会自动缩放到它所在的 div 的宽度。非常适用于 Bootstrap 包等。这个绝招太棒了！

【参考方案4】：

使用 css aspect-ratio 很容易。

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

【讨论】：

"高度：自动；"不是强制性的。

【参考方案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" />
  <iframe   src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>

【讨论】：

使用图像是最好的解决方案，因为您可以轻松地将 iframe 的大小更改为视口的 50%（或 20%，或响应式网站所需的任何内容）。但不是通过 http 加载图像，而是使用带有空 16:9 图像的 data-uri：<img src='data:image/gif;base64,R0lGODlhEAAJAIAAAP///wAAACwAAAAAEAAJAAACCoSPqcvtD6OclBUAOw=='>

刚刚看到了data-uri方法，这个思路不错+1。我还想提一下，当某些 CSS3（更棒的）属性可能还不支持时，这种方法和图像缩放方法适用于旧版浏览器（主要是 IE）。

"但是这次我无法访问 html 代码或 javascript，所以我不能使用包装器来防止 height:0"

或者考虑使用 SVG 作为占位符：<!-- Placeholder --><svg viewBox="0 0 RATIO_WIDTH RATIO_HEIGHT" style="display: block; width: 100%;"></svg>.

【参考方案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 的纵横比。

【讨论】：

"But this time I have no access to the HTML"