必须用<video>元素而非background-image加载视频，因后者不被浏览器支持；.container的max-width和padding会限制视频全屏显示，需改用position-relative vh-100等脱离栅格的容器，并确保autoplay muted loop playsinline四属性齐全，object-fit: cover作用于<video>本身，遮罩与文字须分层独立设置。
不能用 background-image 加视频路径，浏览器根本不认；必须用 <video> 元素手动构建图层，否则在 iOS 上黑屏、Chrome 里静音失败、小屏上只显示左上角一帧。
为什么直接塞进 .container 就失效
Bootstrap 的 .container 有 max-width 和 padding，会把视频框死在中间，左右留白；.row 默认 margin 还可能触发水平滚动条。视频要的是全宽铺满视口，不是栅格内自适应。
- 父容器必须脱离 Bootstrap 栅格流，推荐用
<section class="position-relative vh-100">或<div class="position-fixed w-100 h-100 top-0 start-0"> -
vh-100比h-100可靠——后者依赖父元素高度，而父元素往往没设高 - 别给父容器设
overflow: hidden，否则 iOS Safari 可能裁掉视频边缘
<video> 必须带的四个 HTML 属性
缺任何一个，移动端大概率黑屏或静音失败。这不是可选配置，是浏览器强制策略。
-
autoplay：声明自动播放意图 -
muted：绕过有声限制（哪怕你本意就是静音） -
loop：避免播完停住，尤其 iOS 首次加载后可能不重播 -
playsinline：阻止 iOS Safari 强制全屏，否则内容被遮挡
错误写法：<video autoplay> 或 <video muted loop> —— 缺一不可。
object-fit: cover 为什么必须写在 <video> 上
background-size: cover 对 <video> 完全无效，这是 CSS 规范限制。视频缩放只能靠 object-fit，且必须作用于 video 元素本身。
- 加在父容器上没用，加在伪元素上也不生效
- 配合
position: absolute或position: fixed才能真正覆盖：比如class="position-absolute top-0 start-0 w-100 h-100"+style="object-fit: cover;" - 别用
width: 100vw; height: 100vh代替w-100 h-100—— 前者在 iOS 地址栏隐藏/显示时会抖动，后者更稳
遮罩和文字层怎么叠才不卡顿、不失效
遮罩不能写成 <video style="background-color: rgba(0,0,0,0.5)">，这会覆盖整个 video 元素，导致 playsinline 失效或触摸事件穿透失败。
- 遮罩必须是独立
<div>，和<video>同级，都在position-relative容器内 - 层级顺序固定：
<video>（z-index: 1）→ 遮罩（z-index: 2）→ 文字（z-index: 3） - 文字层推荐用
class="d-flex align-items-center justify-content-center"居中，比transform: translateY(-50%)更少渲染抖动 - 遮罩用
bg-dark opacity-50，别用opacity: 0.5直接调整个容器——否则文字也变半透明
最易被忽略的点：没加 poster 属性。视频加载慢时用户看到的是黑块，加 poster="cover.jpg" 能立刻显示首帧，体验差很多。
