实现网页添加自适应背景视频功能，电脑端显示背景视频，手机端显示背景图片。

第一步

在网页中添加以下代码:

  <!-- 背景视频 -->
  <video autoplay muted loop id="video-background">
    <source src="bg.mp4" type="video/mp4">
    <!-- 可以添加更多视频格式的source标签，以适配更多浏览器，例如： -->
    <!-- <source src="your_video.webm" type="video/webm"> -->
  </video>
  <img src="bg.jpg" id="image-background" alt="替代图片">

第二步

添加以下css代码

/* 视频背景样式 */
#video-background {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: auto;
  z-index: -100;
  object-fit: cover;
}

/* 图片背景样式 */
#image-background {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: auto;
  z-index: -100;
  object-fit: cover;
  display: none;
}

/* 媒体查询，用于在小屏幕设备（手机等）隐藏视频背景，显示图片背景 */
@media only screen and (max-width: 768px) {
  #video-background {
      display: none;
  }
  #image-background {
      display: block;
  }
}