css - 如何使视频具有响应性但仍可观看？

Question

我使用以下代码在 Bootstrap 中制作了一个响应式视频:

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

代码运行完美且响应正确。但他的视频本身没有居中，也没有向我展示整个视频。只是其中的一小部分。这有点难以解释。我已经包含了同一视频和视频时间的两个屏幕截图，但屏幕尺寸不同。

如何让视频居中并保持当前对视频的响应？

Answer 1

检查这个 fiddle :fiddle
你的<div>是 bootstrap responsive，但是你还需要让你的 video 标签响应，所以嵌入的 Video 标签将是:

<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在视频标签中，它会阻止视频在页面打开后立即自动播放，并且删除循环会阻止视频一遍又一遍地重复播放(直到暂停)。