Html 仅使用 CSS 的响应式视频 iframe（保持纵横比）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25302836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive video iframes (keeping aspect ratio) with only CSS?
提问by Toni Michel Caubet
I usually use a similar solution to 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 or JavaScript code so I can't use a wrapper to prevent the height:0.
但是这次我无法访问 HTML 或 JavaScript 代码，因此我无法使用包装器来防止height:0.
Is there a way to make an iframe responsive (and to keep the ratio) with only CSS?
有没有办法只用 CSS 使 iframe 响应（并保持比例）？
Tried this (works with the iframe but not with its content):
试过这个（适用于 iframe 但不适用于其内容）：
iframe {
width: 100%;
background: red;
height: 0;
padding-bottom: 33%;
}
Any thoughts? No need to support old browsers so even a CSS3 solution would be great.
有什么想法吗？不需要支持旧浏览器，所以即使是 CSS3 解决方案也会很棒。
回答by SimonSimCity
Here is a Fiddle for a solution, that is based on a CSS2 secret: https://jsfiddle.net/59f9uc5e/2/
这是一个基于 CSS2 秘密的解决方案的小提琴：https: //jsfiddle.net/59f9uc5e/2/
<div class="aspect-ratio">
<iframe src="" width="550" height="275" 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>
It is explained by how percentage-values for padding are handled:
它通过如何处理填充的百分比值来解释：
The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'.
百分比是根据生成的框的包含块的宽度计算的，即使对于“padding-top”和“padding-bottom”也是如此。
回答by Danield
回答by Bobík
Calcfunction makes it much more readable:
Calc函数使其更具可读性：
.iframe-video {
width: 755px;
height: 424px;
max-width: 100%;
max-height: calc((100vw - 40px) / (16/9));
}
widthandheightis size for desktop and also fallback to ancient browsers40pxis margin (20 px between iframe border and viewport border on both sides)16/9is ratio of video (if you have edge-to-edge player)
width并且height是桌面的大小，也回退到古老的浏览器40px是边距（iframe 边框和两侧视口边框之间的 20 像素）16/9是视频的比例（如果您有边对边播放器）
回答by Fly1nP4nda
This is kind of hackish however you can use images to preserve the aspect ratio of a video. For example I went to paint and saved an image of 1280 x 720 resolution to use for a 16:9 aspect ratio (in here I will just grab a blank image off the internet somewhere).
这有点骇人听闻，但是您可以使用图像来保留视频的纵横比。例如，我去绘画并保存了一张 1280 x 720 分辨率的图像，以用于 16:9 的纵横比（在这里，我将在某处从互联网上抓取一张空白图像）。
This works because if you change the width of an image while leaving height auto, vise-versa the image will automatically scale - keeping proportions.
这是有效的，因为如果您在保持高度自动的同时更改图像的宽度，反之亦然，图像将自动缩放 - 保持比例。
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" alt=""/>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>