直接用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">
</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属性（不是 CSSvolume: 0）必须有
autoplay属性（哪怕 JS 动态调用play()也不行）必须有
playsinline（iOS 禁止全屏播放，否则视频会跳到原生播放器）少任何一个属性，Safari 就静音并暂停，用户滑动后也不会恢复
不要用
preload="metadata"替代autoplay，它只是预加载元数据，不触发播放如果用 JS 控制播放（比如监听 scroll 后播放），需在用户手势事件（
click/touchstart）回调里调用play()，否则会被浏览器拒绝
视频尺寸、静音、内联播放这三点卡死在浏览器策略层，Bootstrap 再怎么封装也绕不过。实际项目里，先确保这三条跑通，再套样式，否则永远卡在黑屏或静音状态。
