视频背景需用position:fixed+object-fit:cover实现全屏覆盖，而非Bootstrap类；必须加autoplay、muted、loop三属性并设poster，移动端还需playsinline；embed-responsive等类不适用全屏场景。
video 元素不能当 CSS background-image 用，Bootstrap 也没有 bg-video 这类内置类——所谓“响应式视频背景”，本质是手动把 video 做成一个定位图层，再用 Bootstrap 的工具类辅助布局和叠层。
为什么直接写 <video></video> 会只显示一小块或黑屏
浏览器默认不拉伸 video 填满父容器，也不响应尺寸变化；没 autoplay muted loop 三件套，chrome/firefox/safari 都会静音、暂停甚至报错 the video playback was aborted due to a corruption problem；加了 object-fit: cover 却没配 position: absolute 或 position: fixed，它照样按默认流式布局渲染，根本不会“覆盖”。
position: fixed + object-fit: cover 是真正铺满视口的组合
关键不是 Bootstrap 类，而是这组 CSS 层叠逻辑：
- 给
video加position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;—— 确保它钉在视口左上角，不随滚动偏移 - 必须加
object-fit: cover;（写在video上，不是父容器），否则宽高比失真 - 加
z-index: -1;前，必须先有position，否则无效；别用z-index: -999，iOS Safari 可能因此静音 - 务必设
poster="cover.jpg"，防加载空白；移动端首帧慢时，用户看到的是这张图，不是黑屏
移动端自动播放失败的硬性条件
不是“写了 autoplay 就能播”，而是现代浏览器强制要求三者同时存在：
-
autoplay：声明意图 -
muted：绕过有声限制（哪怕你本意是静音） -
loop：避免播完停住，尤其 iOS 首次加载后可能不自动重播 - 额外加
playsinline，否则 iOS Safari 强制全屏，遮挡内容 - 监听
canplaythrough而非loadeddata，前者表示足够缓冲可连续播放，后者只是头信息加载完
别让 embed-responsive 或 .ratio 类误导你
这两个类是为嵌入式 iframe 或卡片内视频设计的，靠 padding-top 模拟宽高比，**不适用于全屏背景视频**。误用会导致：
- 在小屏上只显示视频左上角一帧（因为容器高度塌陷）
- 滚动时视频被父容器的
overflow: hidden切掉 - Bootstrap 5 的
.ratio-16x9要求子元素设width="100%" height="100%"，但全屏场景下这反而干扰100vw/100vh - 如果视频放在
.container或.row里，padding/margin 会挤出白边，或导致100vh计算错误（尤其 iOS 地址栏隐藏时）
object-position 微调、preload="metadata" 控制初始请求、预留安全边距导出视频、以及为小屏准备图片降级 fallback。
