Question

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

Answer 1

responsive embed component添加了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>

Answer 2

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

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

Answer 3

查看＆＃34;响应式视频CSS＆＃34; - Source Code on github 。

这是 working demo on Bootply 。单击运行并查看它是否针对不同的屏幕尺寸调整大小。

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

Answer 4

查看responsive-embed.css定位档案。将类.embed-responsive应用于您的嵌入容器或您希望的任何其他类。

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

4 个答案: