仅使用CSS的自适应视频iframe(保持宽高比)? [英] Responsive video iframes (keeping aspect ratio) with only CSS?

问题描述

我通常对此使用类似的解决方案.像这样:

I usually use a similar solution to this one. Something like:

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

But this time I have no access to the HTML or JavaScript code so I can't use a wrapper to prevent the height:0.

是否有一种方法可以仅使用CSS来使iframe响应(并保持比率)?

Is there a way to make an iframe responsive (and to keep the ratio) with only CSS?

对此进行了尝试(适用于iframe，但不适用于其内容):

Tried this (works with the iframe but not with its content):

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

小提琴

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

Any thoughts? No need to support old browsers so even a CSS3 solution would be great.

推荐答案

使用新的 CSS视口单位 vw和vh(视口宽度/视口高度)

Use the new CSS viewport units vw and vh (viewport width / viewport height)

字段

FIDDLE

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

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

Browser support is also good: IE9+ (caniuse)

这篇关于仅使用CSS的自适应视频iframe(保持宽高比)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！