Question

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

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

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

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

试过这个（与iframe一起使用但不与其内容一起使用）：

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

fiddle

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

Answer 1

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

<gap:plugin name="cordova-plugin-whitelist" source="npm" />
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />

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

百分比是根据生成的包含块的宽度计算的，即使对于“填充顶部”也是如此。和＆＃39; padding-bottom＆＃39;。

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

Answer 2

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

<强> FIDDLE

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

浏览器支持也很好：IE9 +（caniuse）

Answer 3

这是一种hackish，但您可以使用图像来保留视频的宽高比。例如，我去绘制并保存了一张1280 x 720分辨率的图像，用于16：9的宽高比（在这里，我只是在某处从互联网上抓取一张空白图像）。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

计算函数使其更具可读性：

.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（保持宽高比）？

4 个答案: