如果您不熟悉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网格并将视频放在该网格中。
如果您要放置视频代码，则上述代码将变为：
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
</div>
同样，如果您为视频使用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个截图。
智能手机中的响应视频
平板电脑中的响应视频
笔记本电脑中的响应视频
感兴趣的小伙伴，可以关注公众号【grain先森】，回复关键词 “vue”，获取更多资料，更多关键词玩法期待你的探索~
网友评论