使用 twitter bootstrap，如何使嵌入式视频响应? [英] Using twitter bootstrap, how to make an embedded video responsive?

问题描述

我正在尝试使嵌入式视频能够响应窗口大小的变化并与移动屏幕兼容.有谁知道要实现哪个类或如何使视频响应?谢谢.

解决方案

响应式嵌入组件已添加发布 Bootstrap 3.2.0.

<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="..."></iframe>

<!-- 4:3 纵横比--><div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" src="..."></iframe>

I am trying to make an embedded video responsive to window size change and compatible with mobile screens as well. Does anyone know which class to implement or how to make the video responsive? Thanks.

解决方案

The responsive embed component was added with the release of Bootstrap 3.2.0.

<!-- 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>

这篇关于使用 twitter bootstrap，如何使嵌入式视频响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！