如果您不熟悉Web开发，请查看本文，了解如何利用Bootstrap在您的网页上创建自适应视频。

如果您在网站上使用任何视频，请确保它们具有响应性。响应视频自动适应用户的屏幕大小。

在本教程中，您将学习如何在您的网站中实现Bootstrap响应式视频。

如何将视频放在网站上

大多数情况下，我们使用HTML 5视频标记将视频放在网站上。视频标记如下所示：

<video width="320" height="240" controls><source src="" type="video/mp4"></video></div>

但是，我们也可以嵌入来自Youtube和Vimeo等第三方网站的视频。

在Youtube中，单击“共享”按钮，然后单击“嵌入”按钮以复制视频的嵌入代码。现在，要在您的网站上显示此视频，只需将此嵌入代码粘贴到您的网页中即可。此视频现在将显示在网页上。

在下图中，我已经标记了如何从Youtube复制Video的嵌入代码。

Bootstrap响应代码

在Bootstrap中，视频应以两种方式之一放置 - 宽高比为16：9或4：3。代码如下：

<!-- 16:9 aspect ratio --><div class="embed-responsive embed-responsive-16by9">//add video code</div><!-- 4:3 aspect ratio --><div class="embed-responsive embed-responsive-4by3">//add video code</div>

注意： 您必须知道如何在您的网站上使用Bootstrap。这样您就可以创建一个Bootstrap网格并将视频放在该网格中。

同样，如果您为视频使用Youtube嵌入代码，则Bootstrap响应视频代码将变为：

<!-- 16:9 aspect ratio --><div class="embed-responsive embed-responsive-16by9"><iframe width="560" height="315" src="https://www.youtube.com/embed/VS6UOyTb5eU"frameborder="0" allowfullscreen></iframe></div><!-- 4:3 aspect ratio --><div class="embed-responsive embed-responsive-4by3"><iframe width="560" height="315" src="https://www.youtube.com/embed/VS6UOyTb5eU"frameborder="0" allowfullscreen></iframe></div>

测试Bootstrap响应视频

让我向您展示这个响应式视频在不同屏幕尺寸下的外观。我已经提供了这些响应视频给出的3个截图。

智能手机中的响应视频

平板电脑中的响应视频

笔记本电脑中的响应视频

结论

Boostrap不是很容易使用吗？如果您对Bootstrap或本教程有任何问题/意见，请务必在以下评论部分提供。