使用引导程序创建视频横幅

Question

我正在开发一个引导网站，我希望在其顶部的视频横幅与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>

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

Answer 1

您的主要问题是如何实现视频对象的宽度。当你赋予它{class 1}}的class属性时，你基本上用样式表中的任何东西覆盖宽度，在这种情况下是bootstrap默认样式。在任何情况下，您都应该通过外部样式表来确定您的网页形状。

您可以通过embed-responsive-item标记链接到它来执行此操作。

<link>

创建名为<link rel="stylesheet" type="text/css" href="style.css"> 的文件并插入以下代码。

style.css

现在明白，这并不总是让视频填满页面。如您所知，您的视频标记位于video { width: 100%; } 标记内。这只会使视频占据该容器的整个宽度。如果该容器的全宽不是网页的宽度，那么它显然不会占用页面的整个宽度。

我建议您详细了解html here中的嵌套元素以及框模型here。