Html Bootstrap 响应式 iframe 不调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24813918/
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
Bootstrap responsive iframe not resize
提问by Josecanalla
I am developing a responsive web page using bootstrap framework, and I want to put a responsive iframe.
我正在使用引导程序框架开发一个响应式网页，我想放置一个响应式 iframe。
The bootstrap docs says that I can put a responsive 16x9 aspect ratio iframe using
bootstrap 文档说我可以使用响应式 16x9 宽高比 iframe
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
and the css (included in the bootstrap.css) is
和 css（包含在 bootstrap.css 中）是
.embed-responsive
{
display: block;
height: 0;
overflow: hidden;
position: relative;
}
.embed-responsive.embed-responsive-16by9
{
padding-bottom: 56.25%
}
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object
{
border: 0 none;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
The result is that the container of the iframe (the div with class "embed-responsive...") is responsive. This takes the correct width and height according to the resolution. But the iframe is overflowed, because it is not resized.
结果是 iframe 的容器（带有“embed-responsive...”类的 div）是响应式的。这根据分辨率采用正确的宽度和高度。但是 iframe 溢出了，因为它没有调整大小。
How can I do to resize the iframe to exactly fill the div?
如何调整 iframe 的大小以完全填充 div？
回答by spasticninja
I was having this problem too. I found a somewhat hack solution. In the iframe section: width:100%so it should look like:
我也遇到了这个问题。我找到了一个有点破解的解决方案。在 iframe 部分：width:100%所以它应该看起来像：
<iframe class="embed-responsive-item" src="…" width="100%"></iframe>
I had to set a fixed value for my height because the iframe source isn't responsive.
我必须为我的高度设置一个固定值，因为 iframe 源没有响应。
Hope that helps.
希望有帮助。
回答by Taylor Daughtry
You can use boostrap for this, but it's such a simple task that you really don't need any framework to help you with this. Check out Responsive Iframes; it's not using any frameworks, and is written in native javascript.
您可以为此使用 boostrap，但这是一项如此简单的任务，您确实不需要任何框架来帮助您完成此任务。查看响应式 Iframe；它没有使用任何框架，并且是用原生 javascript 编写的。
回答by Dylan Valade
I wanted clients to add embedded video anywhere in the site without needing to add special markup or containers. This jQuery function makes all iframes on the page responsive and handles videos too without changing any CSS. Default aspect ratio is 16:9 but you can change the aspect ratio if you want to use 4:3 video or add your own aspect ratio (know of vertical video content being created with phones).
我希望客户可以在站点的任何位置添加嵌入式视频，而无需添加特殊标记或容器。这个 jQuery 函数使页面上的所有 iframe 具有响应性，并且在不更改任何 CSS 的情况下也可以处理视频。默认纵横比为 16:9，但如果您想使用 4:3 视频或添加您自己的纵横比（知道使用手机创建的垂直视频内容），您可以更改纵横比。
