twitter-bootstrap 使用 Bootstrap 的响应式 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25228056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive iframe using Bootstrap
提问by New Co
I am using Bootstrap.
我正在使用引导程序。
I have a text which contains 2 or 3 iframes based embed videos.
我有一个包含 2 或 3 个基于 iframe 的嵌入视频的文本。
This data is fetched from database.
该数据是从数据库中获取的。
How can I make these iframes responsive?
如何使这些 iframe 具有响应性？
Example Code:
示例代码：
<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>
This is a dynamic data. How can I make it responsive?
这是一个动态数据。我怎样才能让它响应？
回答by Christina
Option 1
选项1
With Bootstrap 3.2 you can wrap each iframe in the responsive-embed wrapper of your choice:
使用 Bootstrap 3.2，您可以将每个 iframe 包装在您选择的响应式嵌入包装器中：
http://getbootstrap.com/components/#responsive-embed
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>
Option 2
选项 2
If you don't want to wrap your iframes, you can use FluidVids https://github.com/toddmotto/fluidvids. See demo here: http://toddmotto.com/labs/fluidvids/
如果您不想包装 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>
回答by Mohamed
Please, Check this out, I hope it's help
拜托，看看这个，我希望它有帮助
<div class="row">
<iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
</iframe>
</div>
回答by sunblast
The best solution that worked great for me is the one I found in the link below: https://bootstrapmaster.com/implement-responsive-youtube-vimeo-embed-iframe-twitter-bootstrap-3/
最适合我的解决方案是我在以下链接中找到的解决方案：https: //bootstrapmaster.com/implement-responsive-youtube-vimeo-embed-iframe-twitter-bootstrap-3/
You have to: Copy this code to your main CSS file,
您必须： 将此代码复制到您的主 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%;
}
and then put your embeded video to
然后把你嵌入的视频放到
<div class="responsive-video">
<iframe ></iframe>
</div>
That's it! Now you can use responsive videos on your site.
而已！现在您可以在您的网站上使用响应式视频。
回答by Julián
So, youtube gives out the iframe tag as follows:
因此，youtube 给出了 iframe 标签，如下所示：
<iframe width="560" height="315" src="https://www.youtube.com/embed/2EIeUlvHAiM" frameborder="0" allowfullscreen></iframe>
In my case, i just changed it to width="100%" and left the rest as is. It's not the most elegant solution (after all, in different devices you'll get weird ratios) But the video itself does not get deformed, just the frame.
就我而言，我只是将其更改为 width="100%" 并将其余部分保持原样。这不是最优雅的解决方案（毕竟，在不同的设备中你会得到奇怪的比例）但是视频本身不会变形，只是框架变形。
回答by Ratha Hin
Option 3
选项 3
To update current iframe
更新当前 iframe
$("iframe").wrap('<div class="embed-responsive embed-responsive-16by9"/>');
$("iframe").addClass('embed-responsive-item');
