无需JavaScript，能否基于视口限制替换HTML5视频背景为图片？

当然可以！完全不需要依赖JavaScript，借助CSS媒体查询和简单的HTML结构调整就能轻松实现这个需求。我之前做响应式项目时经常用这种方案，既简洁又避免了JS可能带来的加载或兼容性问题。

步骤1：调整HTML结构 #

首先给视频套一个容器，同时在容器里添加一张图片作为移动端的背景图，默认状态下让图片隐藏：

<div class="background-container">
  <video playsinline autoplay muted loop id="DemoReel2018">
    <source src="resources/AgsVision_backgroundMovie.mp4" type="video/mp4">
  </video>
  <img src="resources/your-mobile-background-image.jpg" alt="移动端背景图" class="mobile-background">
</div>

步骤2：编写CSS样式 #

先给容器设置和原来视频一样的固定定位，确保它铺满整个视口；然后默认显示视频、隐藏图片；最后通过媒体查询，在移动端视口下切换两者的显示状态，并让图片铺满容器：

.background-container {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1; /* 确保背景在页面内容下方 */
}

#DemoReel2018 {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让视频保持比例铺满容器，避免拉伸变形 */
}

.mobile-background {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* 根据你的需求调整断点，这里用768px作为移动端分界 */
@media (max-width: 768px) {
  #DemoReel2018 {
    display: none;
  }
  .mobile-background {
    display: block;
  }
}

补充说明 #

• object-fit: cover 是核心属性，能确保视频和图片都按自身比例铺满容器，不会出现拉伸或留白的情况
• 保留playsinline属性，它能避免iOS设备上视频自动全屏播放的问题
• 你可以根据实际业务需求调整媒体查询的断点（比如改成640px适配更小的手机）
• 如果不想用<img>元素，也可以把图片设为容器的background-image，然后在媒体查询里切换容器的背景和视频的显示状态，效果完全一致

内容的提问来源于stack exchange，提问作者Nelu