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

问题描述

我正在使用 Bootstrap.

我有一个文本，其中包含 2 或 3 个基于 iframe 的嵌入视频.

此数据是从数据库中获取的.

如何使这些 iframe 具有响应性?

示例代码:

<div class="col-lg-12 col-md-12 col-sm-12">一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本<iframe src="http://youtube.com/...."></iframe>一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本<iframe src="http://youtube.com/...."></iframe>一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本<iframe src="http://youtube.com/...."></iframe>

这是一个动态数据.我怎样才能让它响应?

解决方案

Option 1

使用 Bootstrap 3.2，您可以将每个 iframe 包装在您选择的响应式嵌入包装器中:

http://getbootstrap.com/components/#responsive-embed

<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="..."></iframe>

<!-- 4:3 纵横比--><div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" src="..."></iframe>

选项 2

如果您不想包装 iframe，可以使用 FluidVids https://github.com/toddmotto/fluidvids.在此处查看演示:http://toddmotto.com/labs/fluidvids/

 <script src="js/fluidvids.js"></script><脚本>流体视频.init({选择器:['iframe']，玩家:['www.youtube.com', 'player.vimeo.com']});

I am using Bootstrap.

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

This data is fetched from database.

How can I make these iframes responsive?

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?

解决方案

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>

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屋！