bootstrap 3 iframe 调整大小答案

【问题标题】：bootstrap 3 Iframe resizingbootstrap 3 iframe 调整大小
【发布时间】：2015-08-18 11:23:24
【问题描述】：

我在我的一个应用程序中使用 bootstrap 3。如果我使用width="80%" height="420"，那么我的视频在大屏幕上具有完美的尺寸。但由于height="420"，它在小屏幕（手机）中无法响应。所以我使用class="embed-responsive-item" 和iframe。同样的问题iframe 没有响应。请有任何建议。我不熟悉css。这里有一些东西。

<div class="wrapper">
<aside class="right-side">
<section class="content">               
    <div class="row">
        <div class="col-xs-9">
        <div style="background-color: #ffffff;text-align:center;padding:1%;" id="tmp">
        <iframe id="crntplay" width="80%" height="420" src="http://www.youtube.com/embed/id?autoplay=0" allowfullscreen></iframe>
        <div class="row">
<div class="col-md-8"><span id="crntplaytitle" style="margin-left:15%;text-align:left;display: block;font-size:14pt;font-weight:bold;">title</span></div>

<div class="col-md-2"><span id="crntplayviews" style="text-align:right;display: block;font-size:14pt;font-weight:bold;">views</span></div>
</div>
</div>
</div>
</div>
</section><!-- /.content -->

【问题讨论】：

标签： html css twitter-bootstrap iframe

【解决方案1】：

iframe 无法响应。只是其中的内容。您可以使用 jquery 根据屏幕分辨率调整 iframe 的大小

Adjust width and height for iframe depending on screen size

【讨论】：