前端-Bootstrap实现响应视频

如果您不熟悉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个截图。

智能手机中的响应视频

平板电脑中的响应视频

笔记本电脑中的响应视频