Bootstrap 响应式 iframe 不调整大小

Posted 2023-03-29

【中文标题】Bootstrap 响应式 iframe 不调整大小

【英文标题】：Bootstrap responsive iframe not resize

【发布时间】：2014-09-08 22:29:50

【问题描述】：

我正在使用引导框架开发一个响应式网页，并且我想放置一个响应式 iframe。

引导文档说我可以使用响应式 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 的容器（具有“embed-responsive...”类的 div）是响应式的。这将根据分辨率采用正确的宽度和高度。但是 iframe 溢出了，因为它没有调整大小。

如何调整 iframe 的大小以完全填充 div？

【问题讨论】：

这是什么浏览器？

我在firefox中测试，我想是跨浏览器

【参考方案1】：

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

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

我不得不为我的身高设置一个固定值，因为 iframe 源没有响应。

希望对您有所帮助。

【讨论】：

另外，我认为最新版本的 Bootstrap 修复了这个问题。

【参考方案2】：

您可以为此使用 boostrap，但这是一项非常简单的任务，您真的不需要任何框架来帮助您完成此任务。查看Responsive Iframes；它没有使用任何框架，并且是用原生 javascript 编写的。

【参考方案3】：

我希望客户可以在网站的任何位置添加嵌入式视频，而无需添加特殊标记或容器。这个 jQuery 函数使页面上的所有 iframe 都响应并处理视频，而无需更改任何 CSS。默认纵横比为 16:9，但如果您想使用 4:3 视频或添加您自己的纵横比（了解使用手机创建的垂直视频内容），您可以更改纵横比。

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