如何实现Bootstrap响应视频mp4 video

时间:2019-12-01 热度:°C 作者:

如果您不熟悉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或本教程有任何问题/意见,请务必在以下评论部分提供。

如若转载,请注明出处:《如何实现Bootstrap响应视频mp4 video》
永久地址: