我在我们的网站上嵌入了一段YouTube视频,当我将屏幕缩小到平板电脑或手机大小时,它的宽度就会在560px左右停止缩小。这是YouTube视频的标准吗?还是有什么我可以添加到代码中以使其变得更小?
发布于 2013-04-06 06:18:58
您可以使用CSS来响应YouTube视频。使用"videowrapper“类将iframe包装在div中,并应用以下样式:
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videowrapper分区应该在响应式元素中。.videowrapper上的填充是必要的,以防止视频折叠。您可能需要根据您的布局调整数字。
发布于 2016-04-11 20:44:53
如果你使用的是Bootstrap,你也可以使用响应式嵌入。这将使视频响应完全自动化。
http://getbootstrap.com/components/#responsive-embed
下面是一些示例代码。
<!-- 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>
发布于 2015-08-14 22:32:19
我在我的响应式YouTube视频中使用了CSS,直到YouTube在2015年8月初更新了他们的系统。YouTube上的视频尺寸是一样的,但不管是什么原因,我们所有的视频现在都是信箱了。顶部和底部的黑色条纹。
我已经对尺寸进行了调整,并决定去掉顶部填充,将底部填充改为56.45%
。看起来不错。
.videowrapper {
position: relative;
padding-bottom: 56.45%;
height: 0;
}
https://stackoverflow.com/questions/15844500
复制相似问题