如何将Bootstrap图库模板的背景图片替换为全浏览器可自动播放的视频

首先明确：CSS background-image 本身不支持视频资源，仅Safari做了私有特性支持，这是你当前方案仅在Safari生效的核心原因，正确的跨浏览器实现需要替换结构为内嵌<video>标签的形式，具体操作如下：

必要配置说明 #

要实现全浏览器自动播放，必须给视频标签添加以下属性：

• autoplay：页面加载后自动播放
• muted：静音播放，这是Chrome、Firefox、Edge等主流浏览器允许自动播放的强制要求
• loop：循环播放符合图库展示需求
• playsinline：适配iOS Safari，避免视频自动触发全屏播放

完整修改后的代码 #

<div class="col-md-4 ftco-animate">
  <!-- 给容器添加相对定位和溢出隐藏 -->
  <div class="gallery img d-flex align-items-end" style="position: relative; overflow: hidden;">
    <!-- 背景视频标签 -->
    <video autoplay muted loop playsinline poster="images/gallery/leopardshark.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;">
      <!-- 多格式兼容，优先加载webm， fallback到mp4 -->
      <source src="images/gallery/leopardshark.webm" type="video/webm">
      <source src="images/gallery/leopardshark.mp4" type="video/mp4">
    </video>
    <!-- 原有交互和内容层，提升层级盖在视频上方 -->
    <a href="images/gallery/leopardshark.jpg" class="icon image-popup d-flex justify-content-center align-items-center" style="position: relative; z-index: 1;">
      <span class="icon-expand"></span>
    </a>
    <div class="desc w-100 px-4" style="position: relative; z-index: 1;">
      <div class="text w-100 mb-3">
      </div>
    </div>
  </div>
</div>

兼容优化说明 #

• 视频的object-fit: cover属性可以实现和原background-size: cover完全一致的填充效果，不会拉伸变形
• 新增的poster属性设置为原图库图片，视频加载完成前会显示该图片，避免出现空白
• 提供webm和mp4双格式源，覆盖所有现代浏览器的兼容需求
• 原有交互元素添加z-index层级，保证点击等操作不受背景视频影响

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