全屏视频背景必须用position: fixed + top:0;left:0;width:100vw;height:100vh + object-fit:cover实现，不能用Bootstrap的.embed-responsive类；需添加autoplay muted loop poster和playsinline属性，并配独立rgba遮罩层。
直接用 video 元素 + position: fixed + object-fit: cover 实现全屏视频背景，再叠加一层 position: absolute 的 rgba() 遮罩层——Bootstrap 自身不提供“视频背景”或“带遮罩的视频背景”类，所有关键逻辑都在 CSS 定位与颜色控制里。
为什么 <video> 不能套 Bootstrap 的 .embed-responsive 类
.embed-responsive 和 .ratio 是为嵌入式内容（如 iframe、<iframe> 或卡片内视频）设计的，靠 padding-top 模拟宽高比。它会让容器高度塌陷、无法撑满视口，且 video 在里面仍按默认尺寸渲染，结果只显示左上角一帧；滚动时还可能被父容器的 overflow: hidden 切掉。全屏视频背景必须脱离流式布局，走 position: fixed 路线。
怎么写才能让视频铺满视口且不拉伸变形
核心是四行 CSS 必须同时存在，缺一不可：
-
position: fixed—— 把video钉在视口左上角，不随滚动偏移 -
top: 0; left: 0;—— 对齐起点 -
width: 100vw; height: 100vh;—— 强制占满整个视口（注意不是100%，否则受父容器限制） -
object-fit: cover;—— 写在video标签上，不是父容器；否则宽高比失真，要么黑边要么裁切错位
别漏掉 autoplay muted loop poster="cover.jpg" 这四属性，否则 Chrome/Safari 会报 The video playback was aborted due to a corruption problem 或静音卡住；移动端必须加 playsinline，否则 iOS Safari 强制全屏。
半透明层该加在哪、怎么写才不影响文字和按钮
遮罩层必须是独立元素，不能靠 opacity 去压整个 video 或其父容器——那会让视频画面变灰、控件失效。正确做法是：
- 在
video同级、同父容器下，插入一个<div class="video-overlay"></div> - 给它设
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; - 背景用
background-color: rgba(0, 0, 0, 0.4);—— 只透背景，文字和按钮保持 100% 清晰可点 - 确保它的父容器（通常是
<body>或一个position: relative的 wrapper）不干扰定位上下文
别用 opacity: 0.4，否则按钮热区缩窄、文字发虚；也别把 rgba() 写在 video 上——video 不支持 background-color，写了无效。
移动端首帧空白、Safari 突然静音这些坑怎么绕
常见现象：iOS 加载慢，用户看到黑屏几秒；Safari 第二次打开突然没声音（其实是静音状态）；Android 首次点击才开始播。关键点不在 JS 控制，而在 HTML 层硬性约束：
-
poster必须存在且指向一张小尺寸 JPG/PNG，作为加载占位图 -
muted不是可选项，是现代浏览器自动播放的强制条件，哪怕你后续用 JS 解除静音 -
loop要配，否则 iOS 首次播完就停，不会重播，导致遮罩层下露出白底 -
playsinline必须加，否则 iOS Safari 强制跳全屏，遮罩层会被盖住 - 监听
canplaythrough事件而非loadeddata，前者表示足够缓冲可连续播放，后者只是头信息加载完成
真正难的不是“怎么让它动起来”，是视频裁切是否合理、首帧是否及时、低端机是否卡顿、Safari 是否突然静音——这些没法靠一个类解决，得逐项压测。
