响应式视频iframes（保持宽高比），只有CSS？ [英] Responsive video iframes (keeping aspect ratio), with only css?

问题描述

我通常使用类似这一个的解决方案， p>

类似于：

  .wrapper {
 position：relative ; 
宽度：100％; 
 height：0; 
 padding-bottom：33％; 
} 
 .wrapper iframe {
 position：absolute; 
剩下：0; 
 top：0; 
身高：100％; 
宽度：100％; 
} 
  

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

¿是否有办法使iframe响应（并保持比例）只有CSS？

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

  iframe {
 width：100％; 
背景：红色; 
 height：0; 
 padding-bottom：33％; 
} 
  

小提琴

有什么想法？没有必要支持旧浏览器，所以即使是CSS3解决方案也不错。

解决方案

使用新的 CSS视口单元 vw 和 vh （viewport width / viewport height）

  iframe {
 width：100vw; 
身高：56.25vw; / * 100 / 56.25 = 560/315 = 1.778 * / 
 background：red; 
} 
  

浏览器支持也不错：IE9 +（ caniuse ）

I usually use a similar solution as this one

Something like:

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

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

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

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

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

fiddle

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

解决方案

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

Browser support is also good: IE9+ (caniuse)

这篇关于响应式视频iframes（保持宽高比），只有CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！