仅使用 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)
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屋!