Youtube iframe 响应并向左浮动

Question

我需要使 youtube iframe 响应，并且 iframe 保持浮动以向右侧添加内容，我尝试使用此代码但 iframe 没有响应？

谢谢。

JSFiddle：http://jsfiddle.net/94150148/vh04d7y2/

.videoWrapper {
 position: relative;
 padding-bottom: 51.44%; /* 16:9 */
 padding-top: 25px;
 height: 0;
}
.videoWrapper iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
.box1 {
       float:left;
       width: 400px
}

<div class="box1">
<div class="videoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/6apL89xgbR0"
frameborder="0" allowfullscreen></iframe></div></div>
<div class="box2">Some text</div>

Answer 1

你只需要最大宽度：

.left {max-width: 400px;}

Answer 2

我建议使用 Bootstrap 使通过 iframe 添加的嵌入式视频具有响应性，以下是可用于使 iframe 具有响应性的代码

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

但请务必添加 bootstrap.css 和其他 bootstrap 依赖项。

Youtube iframe 响应并向左浮动

Youtube iframe responsive and float left

css

youtube

iframe