html - 使用 bootstrap 创建视频横幅

Question

我正在开发一个 Bootstrap 网站，我希望在顶部有一个视频横幅，类似于 Airbnb做。为此，我使用 bootstrap 的嵌入响应类，如下面的代码片段所示。

<div class="container-fluid" class="embed-responsive embed-responsive-16by9">
    <div class="row">
    <video autoplay muted loop class="embed-responsive-item" id="autovid" width="100%" >
        <source src="sample.mp4" type="video/mp4">
    </video>
    </div>
</div>

这会将视频放入我的网页中，但现在我想将其拉伸(stretch)到整个屏幕。我认为容器流体并将宽度设置为 100% 可以做到这一点，但它仍然只占据屏幕的一部分。当我像 Bootstrap 中那样缩小窗口时，它也没有响应。如何将其拉伸(stretch)到整个屏幕并使其响应尺寸变化？

Answer 1

您的主要问题是如何实现视频对象的宽度。当您赋予它 embed-responsive-item 的类属性时您本质上是用样式表中的任何内容覆盖宽度，在本例中是 Bootstrap 默认样式。无论如何，您确实应该通过外部样式表来塑造您的网页。

您可以通过 <link> 链接到它来完成此操作例如，标签。

<link rel="stylesheet" type="text/css" href="style.css">

创建一个名为 style.css 的文件并插入以下代码。

video { width: 100%; }

现在明白了，这并不总是会让视频填满页面。如您所知，您的视频标签位于 <div> 内。标签。这只会使视频占据该容器的整个宽度。如果该容器的完整宽度不是网页的宽度，那么它显然不会占据页面的完整宽度。

我建议您阅读有关 html 中嵌套元素的更多信息 here ，以及盒子模型 here .