引导响应iframe不调整大小

Question

我正在开发一个使用bootstrap框架的响应式网页，我想把一个响应式iframe。

bootstrap文档说我可以使用

设置一个响应式16x9宽高比iframe

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

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

结果是iframe的容器(div类"embed-responsive…")是响应的。这将根据分辨率获取正确的宽度和高度。但是iframe溢出了，因为它没有调整大小。

如何调整iframe的大小以准确填充div?

Answer 1

我也有这个问题。我找到了一个有点黑的解决方案。在iframe部分:width:100%所以它应该看起来像:

<iframe class="embed-responsive-item" src="…" width="100%"></iframe>

我必须为我的高度设置一个固定的值，因为iframe源没有响应。

希望对你有帮助。

Answer 2

您可以使用boostrap来完成此任务，但这是一个非常简单的任务，您实际上不需要任何框架来帮助您完成此任务。查看响应式Iframes;它不使用任何框架，是用原生javascript编写的

Answer 3

我希望客户可以在网站的任何地方添加嵌入式视频，而无需添加特殊的标记或容器。这个jQuery函数使页面上的所有iframe响应并处理视频，而无需更改任何CSS。默认的宽高比是16:9，但是如果你想使用4:3的视频，你可以改变宽高比，或者添加你自己的宽高比(知道用手机创建的垂直视频内容)。

https://gist.github.com/dylanvalade/b2ba4eaa99ae7968cfd8