我使用Bootstrap。
我有一个包含2或3个iframe嵌入视频的文本。
如何使这些iframes响应？
示例代码：
<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>
这是一个动态数据。我如何让它响应？
解决方法
选项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.参见demo here：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>