使用Bootstrap响应iframe

Question

我正在使用Bootstrap.

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

此数据从数据库中获取.

如何让这些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>

这是一个动态数据.我怎样才能使其响应？

Answer 1

选项1

使用Bootstrap 3.2,您可以将每个iframe包装在您选择的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>

选项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>

Answer 2

请检查一下,我希望它有所帮助

<div class="row">
 <iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
 </iframe>
</div>

Answer 3

对我来说最好的解决方案是我在下面的链接中找到的解决方案: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%;
}

然后把你的嵌入视频

<div class="responsive-video">
    <iframe ></iframe>
</div>

而已!现在,您可以在自己的网站上使用自适应视频

Answer 4

因此,youtube会给出iframe标记,如下所示:

<iframe width="560" height="315" src="https://www.youtube.com/embed/2EIeUlvHAiM" frameborder="0" allowfullscreen></iframe>

在我的情况下,我只是将其更改为width ="100%"并保持其余原样.这不是最优雅的解决方案(毕竟,在不同的设备中你会得到奇怪的比例)但视频本身不会变形,只是框架.