使用Bootstrap的响应式iframe
我正在使用Bootstrap。
我有一个文本，其中包含2或3embedded式video的内置页框。
这些数据是从数据库中提取的。
我如何使这些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> 这是一个dynamic数据。 我怎样才能使其响应？
选项1
使用Bootstrap 3.2，您可以将每个iframe包装在您select的响应embedded包装中：
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>
对我来说最好的解决scheme是我在下面的链接中find的： https ： //bootstrapmaster.com/implement-responsive-youtube-vimeo-embed-iframe-twitter-bootstrap-3/
您必须：将此代码复制到您的主要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%; }
然后把你的embedded式video
<div class="responsive-video"> <iframe ></iframe> </div>
而已！ 现在，您可以在您的网站上使用自适应video。
请检查一下，我希望这是帮助
<div class="row"> <iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com"> </iframe> </div>
选项3
更新当前的iframe
$("iframe").wrap('<div class="embed-responsive embed-responsive-16by9"/>'); $("iframe").addClass('embed-responsive-item');
所以，youtube发出如下iframe标签：
<iframe width="560" height="315" src="https://www.youtube.com/embed/2EIeUlvHAiM" frameborder="0" allowfullscreen></iframe>
在我的情况下，我只是把它改为宽=“100％”，剩下的就是这样。 这不是最优雅的解决scheme（毕竟，在不同的设备，你会得到奇怪的比例），但video本身并没有变形，只是框架。
