Bootstrap如何实现带有背景遮罩的响应式全屏背景视频-Bootstrap教程-PHP中文网

直接用video标签加cover会失效，因background-size: cover对video无效，必须用position: absolute+object-fit: cover；且需muted、autoplay、playsinline三属性共存才能绕过ios/chrome自动播放限制，同时避开bootstrap栅格的padding/margin干扰。

为什么直接用 `video` 标签加 `cover` 会失效？

Bootstrap 自身不提供“全屏背景视频”组件，它只负责布局和响应式基础。很多人直接把 video 塞进 .container 或 .row，结果发现视频被容器裁剪、无法铺满视口、移动端自动暂停或静音失败——根本原因是浏览器对自动播放的限制 + CSS 层级与尺寸逻辑没对齐。

浏览器（尤其 iOS 和 Chrome）要求视频必须 muted 才能自动播放，否则会静音且可能触发暂停
background-size: cover 对 video 元素无效，必须用绝对定位 + object-fit: cover
Bootstrap 的栅格系统有默认 padding/margin，会干扰全屏定位，得用 .position-relative + .position-absolute 覆盖

如何让视频真正“撑满视口”且响应式适配？

核心是绕过 Bootstrap 栅格，用原生 CSS 控制尺寸，再借 Bootstrap 工具类辅助定位和堆叠。

给视频容器设为 position: relative（推荐用 div class="position-relative vh-100"），确保子元素可绝对定位
video 元素设为 position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
添加 z-index: -1 让视频沉底，避免遮挡内容；但注意：不能用 z-index: -1 在 body 直接设，需配合父容器的 position: relative
移动端需额外加 min-height: 100vh 防止 Safari 视口缩放导致高度塌陷

<div class="position-relative vh-100">
  <video class="position-absolute top-0 start-0 w-100 h-100" muted autoplay loop playsinline><source src="bg.mp4" type="video/mp4"></source></video><div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-50"></div>
  <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center text-white">
    <h1>Hello</h1>
  </div>
</div>

遮罩层怎么叠加才不影响视频播放和触摸交互？

遮罩不是靠 background-color，而是独立 div 层，否则会干扰 video 的 playsinline 行为（尤其 iOS）。

遮罩必须和 video 同级，都放在 position-relative 容器内，用 z-index 控制顺序：视频（z-index: 1）→ 遮罩（z-index: 2）→ 内容（z-index: 3）
不要用 rgba() 直接写在 video 上，会导致 Safari 拒绝自动播放
推荐用 Bootstrap 的 bg-<em> + opacity-</em> 工具类，比如 bg-black opacity-50，语义清晰且兼容性好
如果要点击播放/暂停，遮罩层需设 pointer-events: none，否则会拦截事件；内容层则保持默认 pointer-events: auto

移动端自动播放失败的三个硬性条件

iOS 和 Android Chrome 强制要求三者同时满足，缺一不可：

video 必须带 muted 属性（不是 CSS volume: 0）
必须有 autoplay 属性（哪怕 JS 动态调用 play() 也不行）

VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载
必须有 playsinline（iOS 禁止全屏播放，否则视频会跳到原生播放器）
少任何一个属性，Safari 就静音并暂停，用户滑动后也不会恢复
不要用 preload="metadata" 替代 autoplay，它只是预加载元数据，不触发播放
如果用 JS 控制播放（比如监听 scroll 后播放），需在用户手势事件（click/touchstart）回调里调用 play()，否则会被浏览器拒绝