使用Bootstrap响应iframe [英] Responsive iframe using Bootstrap

问题描述

我正在使用Bootstrap。

I am using Bootstrap.

我的文字包含2或3个基于iframe的嵌入视频。

I have a text which contains 2 or 3 iframes based embed videos.

此数据来自数据库。

如何使这些iframe响应？

How can I make these iframes responsive?

示例代码：

<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?

推荐答案

选项1

随着Bootstrap 3.2你可以在你选择的response-embed包装器中包装每个iframe：

Option 1

With Bootstrap 3.2 you can wrap each iframe in the responsive-embed wrapper of your choice:

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/

Option 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/

   <!-- fluidvids.js -->
    <script src="js/fluidvids.js"></script>
    <script>
    fluidvids.init({
      selector: ['iframe'],
      players: ['www.youtube.com', 'player.vimeo.com']
    });
    </script>

这篇关于使用Bootstrap响应iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！