bootstrap 5 已移除 .jumbotron，实现带背景视频的“jumbotron”需手写结构并用原生 css 控制尺寸、层级和播放行为；background-video 无效因 css 无此属性，video 元素须绝对定位、object-fit: cover、muted autoplay loop playsinline，并配合 poster 和遮罩层同级堆叠。
Bootstrap 5 已移除 .jumbotron，所谓“带背景视频的 Jumbotron”不是配置类就能启用的功能，必须手写结构 + 原生 CSS 控制尺寸、层级和播放行为。直接套用旧类或试图用 background-image: url(video.mp4) 会静默失败——浏览器根本不支持视频作为 background-image。
为什么 background-video 写法根本无效
CSS 规范里没有 background-video 这个属性，background-image 只接受图片（url() 指向 PNG/JPG/GIF 等），对 MP4/WebM 文件完全忽略，也不报错。很多开发者在 DevTools 里看到样式“生效”了，其实只是声明被解析但未执行，最终渲染为空白或 fallback 颜色。
-
background-size: cover对<video></video>元素无效，必须作用于 video 自身并配合object-fit: cover - Bootstrap 的
.container、.row默认有padding和max-width，会裁剪视频区域，导致只显示左上角一帧 - 没
muted属性时，Chrome/Firefox/Safari 会静音甚至中止播放，并在控制台抛出The video playback was aborted due to a corruption problem
如何让 <video></video> 真正撑满视口且响应式裁剪
核心是脱离 Bootstrap 栅格流，用绝对定位控制尺寸，再借工具类辅助堆叠。关键不是加多少 Bootstrap 类，而是这组 CSS 层叠逻辑是否对齐：
- 父容器必须设
position: relative（推荐class="position-relative vh-100"），否则子元素无法绝对定位 -
<video></video>加class="position-absolute top-0 start-0 w-100 h-100"，再内联style="object-fit: cover;" - 必须同时加
muted autoplay loop playsinline—— 缺一不可，iOS Safari 尤其敏感 - 移动端需额外加
min-height: 100vh到父容器，防 Safari 地址栏隐藏时视口高度塌陷 - 务必设
poster="cover.jpg"，避免加载空白；首帧截图建议用视频第 1 帧导出，尺寸与视频一致
遮罩层和文字怎么叠加才不破坏交互与播放
遮罩不能写在 <video></video> 的 style 里（如 background-color: rgba(0,0,0,0.5)），那会覆盖整个 video 元素，导致触摸事件失效、playsinline 被绕过，iOS 上直接黑屏。
- 遮罩必须是独立的
<div>，和 <code><video></video>同级，都在position-relative容器内 - 层级顺序：视频（
z-index: 1）→ 遮罩（z-index: 2）→ 文字层（z-index: 3） - 遮罩推荐用
class="bg-dark opacity-50"，别用opacity: 0.5直接调整个容器——否则文字也变半透明 - 文字层建议用
class="d-flex align-items-center justify-content-center text-white"实现居中，避免transform: translate()引发的渲染抖动 - 导出视频时预留安全边距（safe area）：主体内容集中在中心 75% 区域，四周留空
- 用
object-position微调画面位置，例如style="object-position: 50% 30%;"把画面往上提一点，保全人物头部 - 小屏降级方案：
@media (max-width: 768px)中改用object-fit: contain+background-color: #222填充，确保内容完整可见 - 重要文字不要压在视频上——它可能被裁掉或看不清；把文字放在遮罩层之上，靠 padding/margin 留出可读空间
移动端 object-fit: cover 导致关键内容被裁切怎么办
视频宽高比固定（如 16:9），而设备千差万别（iPhone 竖屏 9:16，iPad 横屏 4:3），object-fit: cover 必然裁边。这不是 Bug，是设计预期。
真正难的不是把视频放上去，是它在低端 Android 机上是否卡顿、Safari 是否突然静音、首帧是否及时出现、以及用户滚动时会不会意外触发全屏。这些没法靠 Bootstrap 类解决，得靠 poster、canplaythrough 监听、preload="metadata" 和 H.264 编码控制来补足。
