Bootstrap 无全屏背景视频内置组件，需用HTML5 video+CSS绝对定位+object-fit:cover实现；必须加muted、autoplay、playsinline适配iOS；内容层需显式设置position:relative和z-index。
全屏背景视频在 Bootstrap 中没有内置组件
bootstrap 本身不提供 fullscreen-video-bg 这类封装好的类或 js 插件。所谓“bootstrap 全屏背景视频”，本质是用原生 html5 <video></video> + css 定位 + 少量 js 控制，再套用 bootstrap 的栅格、响应式工具类做内容层排版。直接依赖 bootstrap 的 class（比如 .container、.d-flex）不会让视频自动铺满视口——你得自己写样式。
<video></video> 必须用 object-fit: cover 和绝对定位
常见错误是只加 width: 100%; height: 100vh;，结果视频拉伸变形或上下留黑边。正确做法是：把 <video></video> 放进一个 position: relative 的容器里，再用 position: absolute 覆盖全屏，并强制缩放裁剪：
<div class="video-container"> <video autoplay muted loop playsinline><source src="bg.mp4" type="video/mp4"></source></video> </div>
.video-container 样式要点：
-
position: relative;（为子元素绝对定位提供参照） -
height: 100vh;（确保容器撑满视口高度） -
overflow: hidden;（防止 iOS 滚动时露出视频边缘）
video 样式要点：
position: absolute; top: 0; left: 0; width: 100%; height: 100%;-
object-fit: cover;（关键！保持宽高比并裁剪填充） -
min-width: 100%; min-height: 100%;（兜底兼容老浏览器）
移动端必须加 playsinline 和静音
iOS Safari 默认强制全屏播放视频，且不允许自动播放有声音的媒体。不处理就会出现：视频卡在第一帧、点击后跳转全屏、或者干脆不播。必须同时满足以下条件：
-
muted属性不可省略（即使你后续用 JS 解除静音，初始也得静音） -
autoplay+playsinline缺一不可（playsinline告诉 iOS 别强切全屏） - 避免使用
load事件监听后调用play()—— iOS 10+ 要求用户手势触发，否则抛NotAllowedError
如果需要用户交互后播放（比如点击按钮），JS 中调用 video.play() 前，确保已设置 video.muted = false，且该操作由 click 或 touchstart 触发。
内容层要用 z-index 和 position: relative 显式提升
视频是 absolute 定位，但 Bootstrap 的 .container、.row 等默认无 z-index，在某些浏览器（尤其是 Chrome 新版本）中可能被视频遮挡。不要假设“写在 video 后面就一定在上层”。
推荐结构：
<div class="video-container">
<video ...></video><div class="hero-content position-relative">
<div class="container">...</div>
</div>
</div>
.hero-content 至少需含：
position: relative;-
z-index: 10;（数值大于 video 的默认层，video 无 z-index 时为 auto，等价于 0） - 若用
fixed或sticky导航栏，其z-index也要高于视频（如z-index: 100）
另外，background-attachment: fixed 对视频无效，别试图混用。
最麻烦的其实是视频加载时机和 fallback 图片——没加载完前页面空白，建议用 poster 属性配一张同构缩略图，并用 preload="metadata" 减少首帧延迟。
