使用twitter bootstrap,如何使嵌入式视频响应？

Question

我正在尝试制作一个嵌入式视频,以响应窗口大小的变化,并与移动屏幕兼容.有谁知道要实施哪个类或如何使视频响应？谢谢.

Answer 1

该响应嵌入组件是用加引导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>

Answer 2

HTML5视频最简单的方法是在视频标记中添加class ="img img-responsive":

<video controls class="img img-responsive">

Answer 3

查看"响应式视频CSS" - Source Code on github.

这是一个working demo on Bootply.单击Run并查看它是否针对不同的屏幕尺寸调整大小.

<section class="row">
  <div class="span6">
    <div class="flex-video widescreen"><iframe src="https://www.linktoyourvideo.com/..." frameborder="0" allowfullscreen=""></iframe></div>
  </div>
  <div class="span6">
    ...
  </div>
</section>