blocks|key|2732603|text|选项1|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2732604|使用Bootstrap+3.2，您可以将每个iframe包装在您选择的响应式嵌入包装器中：|2732605|http://getbootstrap.com/components/#responsive-embed|offset|length|2732606|
<div+class="embed-responsive+embed-responsive-16by9">
++<iframe+class="embed-responsive-item"+src="…"></iframe>
</div>


<div+class="embed-responsive+embed-responsive-4by3">
++<iframe+class="embed-responsive-item"+src="…"></iframe>
</div>|code-block|syntax|javascript|2732607|选项2|2732608|如果你不想包装你的iframe，你可以使用FluidVids+https://github.com/toddmotto/fluidvids。请在此处查看演示：http://toddmotto.com/labs/fluidvids/|2732609|+++
++++<script+src="js/fluidvids.js"></script>
++++<script>
++++fluidvids.init({
++++++selector:+['iframe'],
++++++players:+['www.youtube.com',+'player.vimeo.com']
++++});
++++</script>|2732610|entityMap|0|LINK|mutability|MUTABLE|url|1|https://github.com/toddmotto/fluidvids|2|http://toddmotto.com/labs/fluidvids/^0|0|0|0|1G|0|0|0|0|V|12|1|27|10|2|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@$F|16|G|17|1|18]]|A|$]]|$1|H|3|I|5|J|7|19|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1B|8|@]|9|@$F|1C|G|1D|1|1E]|$F|1F|G|1G|1|1H]]|A|$]]|$1|Q|3|R|5|J|7|1I|8|@]|9|@]|A|$K|L]]|$1|S|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|E]]|Z|$5|V|W|X|A|$Y|10]]|11|$5|V|W|X|A|$Y|12]]]]

<h2>Option 1</h2>

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

<p><a href="http://getbootstrap.com/components/#responsive-embed">http://getbootstrap.com/components/#responsive-embed</a></p>

<pre><code>&lt;!-- 16:9 aspect ratio --&gt;
&lt;div class="embed-responsive embed-responsive-16by9"&gt;
  &lt;iframe class="embed-responsive-item" src="…"&gt;&lt;/iframe&gt;
&lt;/div&gt;

&lt;!-- 4:3 aspect ratio --&gt;
&lt;div class="embed-responsive embed-responsive-4by3"&gt;
  &lt;iframe class="embed-responsive-item" src="…"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>

<h2>Option 2</h2>

<p>If you don't want to wrap your iframes, you can use FluidVids <a href="https://github.com/toddmotto/fluidvids">https://github.com/toddmotto/fluidvids</a>. See demo here: <a href="http://toddmotto.com/labs/fluidvids/">http://toddmotto.com/labs/fluidvids/</a></p>

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


blocks|key|148721|text|选项3|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|148722|更新当前iframe的步骤|148723|$("iframe").wrap('<div+class="embed-responsive+embed-responsive-16by9"/>');
$("iframe").addClass('embed-responsive-item');|code-block|syntax|javascript|148724|entityMap^0|0|3|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p><strong>Option 3</strong></p>

<p>To update current iframe</p>

<pre><code>$("iframe").wrap('&lt;div class="embed-responsive embed-responsive-16by9"/&gt;');
$("iframe").addClass('embed-responsive-item');
</code></pre>


blocks|key|151458|text|请看看这个，我希望它能帮上忙|type|unstyled|depth|inlineStyleRanges|entityRanges|data|151459|<div+class="row">
+<iframe+class="col-lg-12+col-md-12+col-sm-12"+src="http://www.w3schools.com">
+</iframe>
</div>|code-block|syntax|javascript|151460|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Please, Check this out, I hope it's help</p>

<pre><code>&lt;div class="row"&gt;
 &lt;iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com"&gt;
 &lt;/iframe&gt;
&lt;/div&gt;
</code></pre>


blocks|key|2945201|text|因此，youtube给出了如下iframe标签：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2945202|<iframe+width="560"+height="315"+src="https://www.youtube.com/embed/2EIeUlvHAiM"+frameborder="0"+allowfullscreen></iframe>|code-block|syntax|javascript|2945203|在我的例子中，我只是将其更改为width="100%25“，其余的保持不变。这不是最优雅的解决方案(毕竟，在不同的设备上，你会得到奇怪的比例)，但视频本身不会变形，只有帧。|2945204|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>So, youtube gives out the iframe tag as follows: </p>

<pre><code>&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/2EIeUlvHAiM" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
</code></pre>

<p>In my case, i just changed it to width="100%" and left the rest as is. It's not the most elegant solution (after all, in different devices you'll get weird ratios) But the video itself does not get deformed, just the frame. </p>


blocks|key|2945228|text|对我来说最好的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2945229|您必须:将此代码复制到您的主CSS文件中，|2945230|.responsive-video+{
++++position:+relative;
++++padding-bottom:+56.25%25;
++++padding-top:+60px;+overflow:+hidden;
}

.responsive-video+iframe,
.responsive-video+object,
.responsive-video+embed+{
++++position:+absolute;
++++top:+0;
++++left:+0;
++++width:+100%25;
++++height:+100%25;
}|code-block|syntax|javascript|2945231|然后把你的嵌入视频放到|2945232|<div+class="responsive-video">
++++<iframe+></iframe>
</div>|2945233|就这样!现在你可以在你的网站上使用响应式视频了。|2945234|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>The best solution that worked great for me.</p>
<p>You have to:
Copy this code to your main CSS file,</p>
<pre><code>.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%;
}
</code></pre>
<p>and then put your embeded video to</p>
<pre><code>&lt;div class=&quot;responsive-video&quot;&gt;
    &lt;iframe &gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>
<p>That’s it! Now you can use responsive videos on your site.</p>


blocks|key|152861|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|152862|在2020年8月期间工作|blockquote|152863|152864|152865|使用这个|152866|<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>|code-block|syntax|javascript|152867|使用一个纵横比|152868|<div+class="embed-responsive+embed-responsive-4by3">
++<iframe+class="embed-responsive-item"+src="…"></iframe>
</div>|152869|在iframe中使用选项|152870|+<iframe+class="embed-responsive-item"+src="..."
++frameborder="0"
++++style="
++++++overflow:+hidden;
++++++overflow-x:+hidden;
++++++overflow-y:+hidden;
++++++height:+100%25;
++++++width:+100%25;
++++++position:+absolute;
++++++top:+0px;
++++++left:+0px;
++++++right:+0px;
++++++bottom:+0px;
++++"
++++height="100%25"
++++width="100%25"
++></iframe>|152871|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|W|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|X|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|Y|7|@]|8|@]|9|$]]|$1|E|3|-4|4|5|6|Z|7|@]|8|@]|9|$]]|$1|F|3|G|4|5|6|10|7|@]|8|@]|9|$]]|$1|H|3|I|4|J|6|11|7|@]|8|@]|9|$K|L]]|$1|M|3|N|4|5|6|12|7|@]|8|@]|9|$]]|$1|O|3|P|4|J|6|13|7|@]|8|@]|9|$K|L]]|$1|Q|3|R|4|5|6|14|7|@]|8|@]|9|$]]|$1|S|3|T|4|J|6|15|7|@]|8|@]|9|$K|L]]|$1|U|3|-4|4|5|6|16|7|@]|8|@]|9|$]]]|V|$]]

<blockquote>
<p>Working during August 2020</p>
</blockquote>
<p>use this</p>
<pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css&quot;&gt;
&lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
</code></pre>
<p>use one aspect ratio</p>
<pre><code>&lt;div class=&quot;embed-responsive embed-responsive-4by3&quot;&gt;
  &lt;iframe class=&quot;embed-responsive-item&quot; src=&quot;…&quot;&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>
<p>within iframe use options</p>
<pre><code> &lt;iframe class=&quot;embed-responsive-item&quot; src=&quot;...&quot;
  frameborder=&quot;0&quot;
    style=&quot;
      overflow: hidden;
      overflow-x: hidden;
      overflow-y: hidden;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
    &quot;
    height=&quot;100%&quot;
    width=&quot;100%&quot;
  &gt;&lt;/iframe&gt;
</code></pre>


<p>I am using Bootstrap.</p>

<p>I have a text which contains 2 or 3 iframes based embed videos.</p>

<p>This data is fetched from database.</p>

<p>How can I make these iframes responsive?</p>

<p><strong>Example Code:</strong></p>

<pre><code>&lt;div class="row"&gt;

   &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     &lt;iframe src="http://youtube.com/...."&gt;&lt;/iframe&gt;

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     &lt;iframe src="http://youtube.com/...."&gt;&lt;/iframe&gt;


     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     &lt;iframe src="http://youtube.com/...."&gt;&lt;/iframe&gt; 

   &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>This is a dynamic data. How can I make it responsive?</p>


Responsive iframe using Bootstrap

数据库

我正在使用Bootstrap。我有一个文本，其中包含2或3个基于iframe的嵌入式视频。这些数据是从数据库中获取的。如何使这些iframe响应？示例代码：<div class="row">   <div class="col-lg-12 col-md-12 col-sm-12">     SOME TEXT SOME...

问使用Bootstrap响应iframe
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Bootstrap响应iframeEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Bootstrap响应iframe
EN