将视频设置为网站的背景

HTML

<video class="bg-video" autoplay muted loop>
      <source src="../assets/video/bg.mp4" type="video/mp4">
</video>

新建一个video视频播放器，用于播放视频文件。

autoplay

这个布尔属性表明视频将在就绪后立即开始播放。当页面加载完成，视频会自动开始播放而无需用户交互。

muted

这个布尔属性表示视频的声音应该被静音。这对于背景视频特别有用，以确保不会打扰用户的浏览体验，尤其是在自动播放的情况下。

loop

这个布尔属性使得视频在播放结束后重新开始播放，形成循环播放效果。

CSS

.bg-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
}

width: 100vw;
height: 100vh;

这两行代码设置视频占据整个页面，充当背景图。

top: 0;
left: 0;

这两行代码设置视频从页面左上角开始定位，配合width，height实现铺满整个屏幕。

object-fit: cover

object-fit 属性指定了可替换元素（如 或 ）的内容应该如何适应到其高度和宽度确定的框内。

cover

意味着元素的内容将保持其宽高比并覆盖整个容器。如果需要的话，内容将会被裁剪以确保它完全覆盖容器区域。如果元素的比例与容器的比例不匹配，内容将被缩放直到它的尺寸完全覆盖容器，会裁剪掉一些内容。但内容的中心部分会始终显示在容器中，多余的边缘部分则会被裁切。
这个属性非常适合用来创建背景视频或图片，确保它们总是完整地填充指定的空间，同时不会失真。

position: fixed;

position

属性指定了元素的定位类型，它决定了元素如何相对于浏览器窗口或页面上的其他元素进行定位。

fixed

表示该元素的位置是相对于浏览器窗口固定的，而不是相对于文档流中的任何其他元素。即使用户滚动页面，该元素也会保持在视窗中的相同位置。