使用Bootstrap的响应式iframe

kognpnkq  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(7)|浏览(243)

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

这是一个动态数据。如何使其具有响应性?

fd3cxomn

fd3cxomn1#

选项1

使用Bootstrap 3.2,您可以将每个iframe Package 在您选择的响应嵌入 Package 器中:
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/fluidvidshttp://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>
neekobn8

neekobn82#

拜托,看看这个,我希望能帮上忙

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

hc8w905p3#

最好的解决方案,对我来说很好。
您必须:将此代码复制到主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>

就是这样!现在你可以在你的网站上使用响应视频了。

q5lcpyga

q5lcpyga4#

因此,youtube给出了iframe标签如下:

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

在我的例子中,我只是把它改为width=“100%”,其余的保持原样。这不是最优雅的解决方案(毕竟,在不同的设备中,你会得到奇怪的比例),但视频本身不会变形,只是框架。

0g0grzrc

0g0grzrc5#

方案3

更新当前iframe

$("iframe").wrap('<div class="embed-responsive embed-responsive-16by9"/>');
$("iframe").addClass('embed-responsive-item');
2lpgd968

2lpgd9686#

2020年8月期间工作
用这个

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

使用一个纵横比

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

在iframe内使用选项

<iframe class="embed-responsive-item" src="..."
  frameborder="0"
    style="
      overflow: hidden;
      overflow-x: hidden;
      overflow-y: hidden;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
    "
    height="100%"
    width="100%"
  ></iframe>
3lxsmp7m

3lxsmp7m7#

您可以使用以下语法使iframe在Bootstrap 5中响应:

<div class="ratio ratio-16x9">
  <iframe src="LinkHere" title="YouTube video" allowfullscreen></iframe>
</div>

16x9以外的宽高比:

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

相关问题