HTML视频背景仅在Safari生效，Chrome全平台无法显示求助

算力阿峰

2026-7-10

问题分析与解决方案

核心原因：Chrome（含移动端）不支持将视频文件直接作为CSS背景图，而Safari对这种非标准用法做了兼容处理，这就是两边表现不一致的根本原因。
你之前尝试改用video标签但未解决问题，大概率是没做好层级与布局的适配，下面是可行的实现方案：

正确实现代码示例

<section class="test-section">
  <!-- 背景视频 -->
  <video autoplay muted loop playsinline class="bg-video">
    <source src="https://vod-progressive.akamaized.net/exp=1695475892~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F3990%2F16%2F419951337%2F1813073867.mp4~hmac=2d4f723c1f6418da935bee5e3d8b2d9bea27f888e1b3913bb5eb685f3e32d664/vimeo-prod-skyfire-std-us/01/3990/16/419951337/1813073867.mp4" type="video/mp4">
  </video>
  <!-- 内容层 -->
  <div class="section-content">Section text</div>
</section>

<style>
.test-section {
  position: relative;
  height: 350px;
  overflow: hidden;
}
.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.section-content {
  position: relative;
  z-index: 1;
  /* 可添加文字样式增强可读性，比如白色文字 */
  color: #fff;
  padding: 20px;
}
</style>