Background Video CSS

一个填满整个浏览器窗口的背景视频。“背景”一词指的是叠加在视频上的文字；这是一个不常看到的有趣效果。最可能的原因是，视频文件不能在 CSS 中指定为背景图像。要完成它，需要一些布局上的技巧。

当然，一个占据整个页面的背景视频有点太多了。我认为可以做得很有品味。我更关心如何完成它，如果需要的话，以及它可能采取的各种潜在模式，而不是在这里争论设计理念（也许稍后）。

品味的基本原则在此仍然很重要

• 无声音。默认情况下。选择加入音频是合适的。
• 注意你的带宽。视频内容是你可以放在网站上的最重的内容。请注意，这是一个未经特别要求的视频。
• 使其可用。由于你很可能会在视频上叠加文本，请确保对比度足够以保证可读性。

为了纪念 Media Temple 和我将在 Montana 风格中看到的 ZaneRay 之旅，让我们开始吧。

全屏背景视频的操作方法

在这里，我们很幸运。Dudley Story 之前已经对这个主题进行了许多研究，并为我们提供了一个有用的设置。他还有一个示例页面。

当然，我们必须在页面上发布视频，所以在这里

这里有很多优质的属性！当视频加载缓慢或根本不加载时，poster 属性会为视频提供一个图像来显示。也可以考虑在 CSS 中使用背景。

autoplay 属性存在是因为我们希望视频自动开始播放。请记住，我们很体贴；因此，这是可以的。用户无法开始或停止视频，因为没有控件。要在 iOS 上实现此功能，请使用 playsinline 属性。除了作为一种有品味的选择（因为视频一开始就不应该有音频），muted 属性对于 iOS 自动播放来说是必需的。之后，loop，嗯，循环。

你可以这样做，让视频填满整个页面

CSS

这样你就会得到一个全屏视频！太棒了！

现在让我们来看一些模式。全屏视频可以用一种方法处理，而其他几种选项也存在。

只有一个视口

我们已经定位了视频。现在我们可以在上面放置任何东西。

放一些像这样的文字

它可以相对于视频定位，并放在其后面以显示在上面。接下来，做一点居中

我们有最简单的效果

Html

CSS

我们喜欢的其他项目可以放置在页面的任何位置。虽然不时髦，但我们甚至可以移除一段可以自行滚动的文本，以保持“全屏”的印象。

HTML

CSS

一个视口标题，滚动消失

其他组件可以在视频全屏播放时滚动消失。标题不需要任何更改！在此示例中，正文文本按预期显示，而标题文本仍然完美地填充在视口中，滚动消失。它甚至是半透明的，可以看到它后面的静态视频。

HTML

CSS

JS

一个视口标题，内容滚动过标题

内容可以滑过视频上方的标题文本，或者保持固定。使用 margin-top: 100vh 来固定视频和标题的位置，同时确保主内容被推离视口，这是一种方法。

HTML

CSS

更进一步，我们可以将标题文本在滚动时淡出背景，通过将一些不透明度和缩放调整与滚动位置绑定。使用 CSS 自定义属性使其变得简单！这是演示。

HTML

CSS

JS