使用Bootstrap响应iframe
使用Bootstrap响应iframe
提问于 2014-08-10 19:18:37
我正在使用Bootstrap。
我有一个文本，其中包含2或3个基于iframe的嵌入式视频。
这些数据是从数据库中获取的。
如何使这些iframe响应？
示例代码：
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
<iframe src="http://youtube.com/...."></iframe>
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
<iframe src="http://youtube.com/...."></iframe>
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
<iframe src="http://youtube.com/...."></iframe>
</div>
</div>这是一个动态数据。我怎么才能让它响应呢？
回答 6
Stack Overflow用户
发布于 2014-08-11 04:52:11
选项1
使用Bootstrap 3.2，您可以将每个iframe包装在您选择的响应式嵌入包装器中：
http://getbootstrap.com/components/#responsive-embed
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>选项2
如果你不想包装你的iframe，你可以使用FluidVids https://github.com/toddmotto/fluidvids。请在此处查看演示：http://toddmotto.com/labs/fluidvids/
<!-- fluidvids.js -->
<script src="js/fluidvids.js"></script>
<script>
fluidvids.init({
selector: ['iframe'],
players: ['www.youtube.com', 'player.vimeo.com']
});
</script>Stack Overflow用户
发布于 2015-06-23 17:59:21
请看看这个，我希望它能帮上忙
<div class="row">
<iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
</iframe>
</div>Stack Overflow用户
发布于 2016-04-22 18:27:31
对我来说最好的解决方案。
您必须:将此代码复制到您的主CSS文件中，
.responsive-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 60px; overflow: hidden;
}
.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}然后把你的嵌入视频放到
<div class="responsive-video">
<iframe ></iframe>
</div>就这样!现在你可以在你的网站上使用响应式视频了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25228056
复制相关文章
相似问题