html - 如何使这个 youtube 视频响应？

Question

我有一个包装好的 you tube 视频。

<div class="featured_video_plus">
    <iframe width="730" height="435" frameborder="0" id="fvpyt234171" type="text/html" src="youtubesourcefile"></iframe>
</div>

当我输入以下 CSS 代码时，这个视频是响应式的。

/*** You tube video ***/
.featured_video_plus { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;}
.featured_video_plus iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

但是当包装器位于另一个 DIV 中时它没有响应。我在某些地方也有这段代码:

<div class="utube-wrapper" style="width: 730px; margin: 0px 33px 32px 0px; float: left;">
    <!-- Featured Video Plus v1.9-->
    <div class="featured_video_plus">
        <iframe width="730" height="435" frameborder="0" id="fvpyt233458" type="text/html" src="youtubesourcefile"></iframe>
    </div>
</div>

当它也在 div utube-wrapper 中时，我怎样才能让这个 youtube 视频响应？

我也试过下面的代码..但没有用。

/*** You tube video ***/
.featured_video_plus { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;}
.featured_video_plus iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.utube-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;}
.utube-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Answer 1

只需取出 -> 宽度 730px 并从 utube-wrapper 向左浮动