我正在使用bootstrap框架开发一个响应式网页,我想放置一个响应式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?
我也遇到这个问题了。我找到了一个有点黑客的解决方案。在 iframe 部分:
width:100%
所以它应该看起来像:
<iframe class="embed-responsive-item" src="…" width="100%"></iframe>
我必须为我的身高设置一个固定值,因为 iframe 源没有响应。
希望有帮助。
您可以使用 boostrap 来完成此任务,但这是一项非常简单的任务,您实际上不需要任何框架来帮助您完成此任务。查看响应式 Iframes;它不使用任何框架,并且是用本机 JavaScript 编写的。
我希望客户可以在网站的任何位置添加嵌入式视频,而无需添加特殊的标记或容器。这个 jQuery 函数使页面上的所有 iframe 都能响应并处理视频,而无需更改任何 CSS。默认宽高比为 16:9,但如果您想使用 4:3 视频或添加您自己的宽高比,则可以更改宽高比(了解使用手机创建的垂直视频内容)。
引导5.3
Ratios 可以帮助您构建响应式 iframe 内容。
使用比例助手来管理外部内容的宽高比,例如
这将使您的内容具有响应能力,同时保持您设置的宽高比。
来自 Bootstrap 的示例:
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
有关更多信息,请参阅 Bootstrap 文档:Bootstrap 5.3 Ratio 文档。