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

bootstrap 3 iframe调整大小

1 个答案: