Bootstrap 5 已移除 jumbotron，实现带背景视频的全屏横幅需手动构建：用 position-relative 父容器包裹绝对定位 video（object-fit: cover）、遮罩 div 和文字层，配 muted autoplay loop playsinline 属性及 fallback 图片。
Bootstrap 5 已移除 jumbotron 组件，所以“带背景视频的 Jumbotron”不是开箱即用的功能，必须手写结构 + 原生 CSS 控制尺寸和层级。直接套用 .jumbotron 类会失效，且视频大概率不铺满、不自动播放、在 iOS 上黑屏。
为什么不能直接给 .jumbotron 加 background-video？
因为 CSS 不支持 background-video；background-image 只能加载图片，无法嵌入视频。很多人误以为加个 background: url(video.mp4) 就行——浏览器根本不识别，也不会报错，只是静默失败。
- 视频必须用
<video>元素承载，不是 CSS 属性 -
background-size: cover对<video>无效，必须用object-fit: cover+position: absolute - Bootstrap 的
.container或默认栅格有padding和max-width，会裁剪视频，不能把<video>塞进里面
如何让 video 真正撑满视口并响应式裁剪？
核心是脱离 Bootstrap 栅格流，用绝对定位控制尺寸，再靠工具类辅助堆叠和文字居中。
- 父容器设
position: relative（推荐class="position-relative vh-100"），确保子元素可绝对定位 -
<video>加class="position-absolute top-0 start-0 w-100 h-100"，再配style="object-fit: cover;" - 必须加
muted autoplay loop playsinline—— 缺一不可，否则 iOS/Chrome 直接拒绝播放 - 移动端要防 Safari 视口缩放导致高度塌陷，额外加
min-height: 100vh到父容器
怎么叠加遮罩和文字内容才不破坏交互？
遮罩不能写在 <video> 的 style 里（比如 background-color: rgba()），那会覆盖整个 video 元素，导致触摸事件失效或 playsinline 失效。
- 遮罩必须是独立的
<div>，和<video>同级，都在position-relative容器内 - 层级顺序：视频（
z-index: 1）→ 遮罩（z-index: 2）→ 文字层（z-index: 3） - 文字层建议用
class="d-flex align-items-center justify-content-center"实现居中，避免依赖transform带来的渲染抖动 - 遮罩用
bg-dark opacity-50即可，别用opacity: 0.5直接调整个容器——否则文字也变半透明
fallback 图片和兼容性怎么处理？
视频加载失败、格式不支持或被禁用时，用户看到的是黑块或空白，必须提供降级方案。
- 在
<video>内第一行放<img src="fallback.jpg" alt="Hero background">，浏览器会在视频不可用时显示它 - 不要只依赖多
<source>格式（mp4/webm），iOS 对 webm 支持差，优先用 mp4 + H.264 编码 - 视频文件体积大，建议压缩到 3–5MB 以内，否则首屏白屏时间长；可用 FFmpeg 加
-vcodec libx264 -crf 23控制质量 - 本地开发时用
http-server或 Live Server 启服务，别用file://协议——否则视频和 fallback 图片都可能被浏览器拦截
真正难的不是写几行 HTML，而是理解浏览器对自动播放的限制逻辑、CSS 尺寸模型与定位层级之间的耦合关系。一个没设 playsinline 的视频，在 iPhone 上点十次都不会播；一个忘了 position: relative 的父容器，top: 0 就会失效到页面顶部外。这些细节不显眼，但决定成败。
