我敢打赌您一定见过。 占据整个浏览器窗口的视频背景。 它上面有文本（因此，称为“背景”），这是一种您每天都看不到的有趣效果。 您可能没有看到它的最大原因是您无法将电影文件设置为 CSS 中的 background-image。 您必须做一些布局技巧才能完成它。
当然，全页面背景视频可能有点过分。 我认为可以恰到好处地完成它。 我对设计理念的争论没有特别感兴趣（也许下次再说），而是关于在需要时如何完成它，以及它可能采取的不同模式。
仍然值得一提的是这里关于美感的要点
- 没有声音。 至少默认情况下是这样。 选择性声音是可以接受的。
- 尊重带宽。 视频是您可以在网站上放置的最重的东西，而这正是一种人们没有明确要求的视频，因此要注意这一点。
- 保持可访问性。 您可能在视频顶部放置文本，因此请确保它有足够的对比度以可读。
让我们以蒙大拿风格来做这件事，以纪念 Media Temple 和我一起前往拜访 ZaneRay 的旅行。
全页面背景视频的实现方法
我们很幸运。 Dudley Story 已经对此进行了大量的研究，并有一个不错的设置我们可以使用。 他也有 一个演示页面。
当然，我们需要将视频放在页面上，所以这里就是这样
<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
<source src="polina.webm" type="video/webm">
<source src="polina.mp4" type="video/mp4">
</video>那里有很多属性！ poster 属性为视频提供了一个图像，在视频加载时或视频根本无法加载时显示。 您可能也想在 CSS 中使用 background。
autoplay 属性在那里，因为我们希望视频自动播放。 请记住，我们在这里要保持美观，因此这没问题。 没有 controls 属性，因此用户无法启动/停止视频。 playsinline 属性是为了使它在 iOS 上工作。 muted 属性只是出于美观考虑（视频本来就不应该有音频，而且在 iOS 上还需要它才能让自动播放正常工作。 然后 loop 使它，嗯，循环播放。
要使用视频覆盖整个页面，您可以这样做
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}这将使您获得全页面视频！ 好极了！
现在让我们看看一些模式。 处理全页面视频只有一个方法，但我们可以做很多事情。
只有一个视窗
我们已经将视频放到了合适的位置。 现在我们可以在它上面设置任何我们想要的东西。
使用一些类似这样的文本
<header class="viewport-header">
<h1>
Explore
<span>Montana</span>
</h1>
</header>我们可以将它放在视频之后，并使用相对定位，这样它就会显示在顶部。 然后应用一些居中
.viewport-header {
position: relative;
height: 100vh;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}我们得到了最简单的效果
查看 CodePen 上的
全页面视频：基本 by Chris Coyier (@chriscoyier)
on CodePen.
我们也可以将我们喜欢的其他任何东西定位在页面的任何位置。 它并不特别流行，但我们甚至可以放下一个独立滚动的文本区域，这样“全页面”效果就会保持完整。
查看 CodePen 上的
全页面视频：子滚动 by Chris Coyier (@chriscoyier)
on CodePen.
一个视窗标题，滚动消失
视频可以保持全屏，并让其他元素滚动消失。 标题没有理由保持固定！ 在此演示中，标题文本（仍然完全填充视窗）会滚动消失，而正文内容会像您预期的那样出现。 它甚至稍微透明，仍然显示后面的视频。
查看 CodePen 上的
全页面视频：先全屏然后滚动 by Chris Coyier (@chriscoyier)
on CodePen.
一个视窗标题，内容滚动到标题之上
我们放置在视频上的标题文本可以保持固定，而内容可以向上滑动到它上面。 实现这一点的一种方法是固定定位视频和标题，但仍然确保主要内容被推到视窗之外，方法是使用 margin-top: 100vh;
查看 CodePen 上的
全页面视频：滚动并隐藏 by Chris Coyier (@chriscoyier)
on CodePen.
进一步扩展，我们可以将一些不透明度和缩放更改连接到滚动位置，并在滚动时使标题文本淡化到背景中。 使用 CSS 自定义属性很容易实现！ 这里有 该演示。
查看 CodePen 上的
全页面视频：滚动并缩小 by Chris Coyier (@chriscoyier)
on CodePen.
一个想法，多种方法！