将YouTube视频缩小为响应宽度?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (15)

我们在我们的网站上嵌入了一个YouTube视频,当我将屏幕缩小至平板电脑或手机尺寸时,它的宽度缩小至560px左右。这是YouTube视频的标准,还是我可以添加到代码中使其变得更小?

提问于
用户回答回答于

你可以使用CSS对YouTube视频进行响应。将iframe与“videowrapper”类相匹配,并应用以下样式:

.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 div应该放在响应元素中。必须填写.videowrapper上的填充以防止视频崩溃。

用户回答回答于

如果你正在使用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>

扫码关注云+社区