自动调整大小的YouTube嵌入式视频
自动调整大小的YouTube嵌入式视频
提问于 2016-09-13 14:44:56
我正在建设一个网站，我希望能在嵌入式youtube视频上大量展示，但嵌入代码只允许你指定一个宽度，这是一个问题，当涉及到整个移动响应方面，我们都必须越来越多地遵守。
那么，是否可以仅仅根据屏幕的宽度或者CSS @屏幕模式来更改视频的尺寸呢？
这不是一个完全响应的宽度..。理想情况下，我想让完整的视频播放在400 at，而移动显示在300 at。
有什么选择吗？
回答 1
Webmasters Stack Exchange用户
发布于 2016-09-13 16:26:36
你可以试试这个：
从嵌入代码中移除高度和宽度，并将其放在div类之间，并向iframe添加一个类，如下所示：
<div class="youtube">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe>
</div>然后，您必须在css中这样做：
//this goes to the embed container div class
.youtube {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
//the class you give to the iframe
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}.youtube类的宽度为100%，填充底部为56.25%。这个百分比是9/16的结果(因为我们在这个视频中使用了16:9的分辨率)。你可以根据你想要的分辨率调整垫底百分比。
在本站中，您可以找到更多有关这方面的信息，但是这段代码应该可以工作
页面原文内容由Webmasters Stack Exchange提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://webmasters.stackexchange.com/questions/99255
复制相关文章
相似问题
腾讯云开发者
