我需要制作一个iftube 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>
答案 0 :(得分: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和其他引导程序依赖项。
答案 1 :(得分:-1)
您只需要max-width:
.left {max-width: 400px;}