【问题标题】:Youtube iframe responsive and float leftYoutube iframe 响应式和向左浮动
【发布时间】:2016-01-12 21:28:14
【问题描述】:

我需要制作一个 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>

【问题讨论】:

    标签: css iframe youtube


    【解决方案1】:

    我建议使用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 和其他引导程序依赖项。

    【讨论】:

      【解决方案2】:

      你只需要最大宽度:

      .left {max-width: 400px;}
      

      【讨论】:

        猜你喜欢
        • 2016-11-19
        • 2015-10-08
        • 2011-06-16
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-07-28
        相关资源
        最近更新 更多