twitter-bootstrap – 响应iframe使用Bootstrap

发布时间：2020-12-17 23:48:55 所属栏目：安全来源：网络整理

导读：我使用Bootstrap。我有一个包含2或3个iframe嵌入视频的文本。此数据从数据库获

我使用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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!