视频背景文字遮罩失效的主因是父容器缺失position: relative，需用position-relative包裹并手动设置video和文字的absolute定位、z-index及object-fit；移动端需autoplay muted loop playsinline四属性齐备，文字居中须配合transform或Flex，且视频源需预留安全边距适配裁切。
直接用 <video> 做背景，再堆文字上去，90% 的失败都出在定位上下文缺失、z-index 逻辑错乱或 autoplay 被浏览器拦截——不是 bootstrap 不行，而是它根本没封装这整套行为。
为什么文字总盖不住视频或飞到屏幕外
核心问题是父容器没设 position: relative，导致文字用 position: absolute 时直接相对于 <body> 定位。Bootstrap 的 .container、.row、.ratio 都不自带定位上下文，必须手动加。
- 用
<div class="position-relative vh-100">包住整个结构（vh-100确保高度撑满视口） -
<video>加class="position-absolute top-0 start-0 w-100 h-100"，但必须额外写style="object-fit: cover;"（Bootstrap 不提供该样式） - 文字层也必须是
position-absolute，且z-index显式大于视频（如z-index: 10），不能依赖默认层叠顺序 - 别把文字塞进
<video>标签里——它不接受子元素，会直接忽略
移动端视频黑屏/只播一帧/自动跳全屏
这不是 Bug，是现代浏览器的硬性策略：没 autoplay、muted、loop 三者同时存在，iOS Safari 和 Chrome Android 就不会启动播放；漏掉 playsinline，iOS 就强制全屏遮挡内容。
- 必须写全：
<video autoplay muted loop playsinline poster="cover.jpg"> -
poster不可省——首帧加载慢时，用户看到的就是这张图，不是黑块 - 监听
canplaythrough事件再操作 UI（比如隐藏 loading 提示），比loadeddata更可靠 - 加兜底：
video.play().catch(e => console.warn("Autoplay prevented:", e))，避免 JS 报错中断流程
文字遮罩居中失效或在小屏偏移
只写 top: 50%; left: 50% 不够，因为这是把元素左上角钉在中心点；没 transform: translate(-50%, -50%) 回拉，文字就永远偏右下。但更麻烦的是，不同设备视口高度计算不一致（尤其 iOS 地址栏隐藏后 vh 动态变化）。
- 推荐用 Flex 居中替代绝对定位：
<div class="d-flex align-items-center justify-content-center position-absolute top-0 start-0 w-100 h-100 z-10"> - 文字容器加
text-shadow: 0 1px 2px rgba(0,0,0,0.8)和半透背景（如bg-dark bg-opacity-25），否则浅色视频上字根本看不清 - 避免用
font-size: 2rem这类固定值，改用fs-4或fw-bold等 Bootstrap 响应式字号类 - 如果文字含关键信息（比如 CTA 按钮），务必在
@media (max-width: 768px)中降级为object-fit: contain+ 纯色背景，防止被裁切
真正难调的不是代码，是视频本身
你写的 CSS 再准，视频源不合适照样白搭：宽高比失配导致关键内容被裁、文件太大拖慢首屏、低端机解码卡顿掉帧——这些都不是 Bootstrap 能解决的。
- 导出视频时预留安全边距：主体内容集中在画面中心 70% 区域，四周留空
- 用
object-position: 50% 30%微调垂直位置（比如把人脸往上提），比硬换视频更可控 - 优先 MP4（H.264）+ WebM 双源，
<source>标签按media属性切不同分辨率（如小屏用 720p，桌面用 1080p） - 装饰性背景？直接用
background: url(video.gif)或静态封面图 + 播放按钮，体验更稳
