html - bootstrap 3 Iframe 调整大小

Question

我在我的一个应用程序中使用 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 -->

Answer 1

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

Adjust width and height for iframe depending on screen size