如何使视频响应但仍然可以观看？

Question

我使用以下代码在Bootstrap中制作了视频响应：

<div class="embed-responsive embed-responsive-16by9">
     <video src='#' width='640' height='360'>
</div>

代码完美且正确地响应。但是他的视频本身并不是中心，并没有向我展示整个视频。只是其中的一小部分。这很难解释。我已经包含了相同视频和视频时间的两个屏幕截图，但屏幕大小不同。

如何将视频居中并仍然保持我目前对视频的响应能力？

Answer 1

检查这个小提琴：fiddle
您的<div>是自助响应式的，但您还需要使视频标签具有响应性，因此嵌入的视频标记将为：

<div align="center" class="embed-responsive embed-responsive-16by9">
    <video autoplay loop class="embed-responsive-item">
        <source src=your_video_url type=video/mp4>
    </video>
</div>

您可以删除视频代码中的autoplay loop，一旦打开页面，它就会阻止视频自动播放，并且删除循环将阻止视频反复重复（直到暂停）。< / p>