video自动播放需同时声明muted、autoplay、playsinline三属性，缺一不可；遮罩层须用同级div或伪元素实现，禁用background-color遮罩；三层结构需平级并手动管理z-index与stacking context；移动端高度推荐100dvh或min-height: 100%。
video元素必须加muted autoplay playsinline三属性
缺任何一个，iOS和Chrome都会拒绝自动播放，视频DOM尺寸为0，后续所有绝对定位、遮罩层都会错位或消失。这不是可选配置，是硬性门槛。
-
muted不能靠JS后期加，必须写在HTML里：<video muted> -
autoplay和playsinline同样要内联声明，尤其是playsinline——Safari不认webkit-playsinline别名 - 别用
poster图当fallback：它会挡住首帧，导致遮罩层对齐偏移；真要用，得监听loadeddata事件后JS移除
遮罩层必须用独立div或伪元素，不能靠bg-black/50
bg-black/50编译成background-color: rgba(0,0,0,0.5)，它只是父容器的一层纯色背景，和<video>不在同一渲染层级，既不参与mix-blend-mode，也无法构成视觉上的“视频→遮罩→文字”链。
- 正确做法：用同级
<div class="position-absolute inset-0"></div>或::before伪元素，显式设content: ""、position: absolute、inset: 0 - 遮罩背景推荐用渐变：
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 70%)，至少两层背景才能触发混合逻辑 - 务必加
pointer-events: none到遮罩层，否则会拦截视频控件点击和下方按钮交互
z-index和stacking context必须手动理清
<video>默认触发GPU合成，会创建独立stacking context。你给文字设z-index: 9999也没用，除非它和视频在同一个context下。
- 三层结构必须严格平级：
<video>、遮罩<div>、内容<div>都放在同一个position-relative容器内 - 遮罩层
z-index: 2，文字层z-index: 3，视频z-index: 1（别用-1，容易被其他fixed元素覆盖） - 删掉任何可能创建新context的样式：比如遮罩父容器的
opacity、transform、filter，它们会让z-index失效
移动端高度必须用100dvh或min-height: 100%
iOS Safari的100vh会在地址栏收放时跳变（比如从667px突变到736px），导致遮罩上下抖动或露出白边。
立即学习“前端免费学习笔记（深入）”；
- 稳妥方案：
height: 100dvh（Chrome 108+/Safari 16.4+支持），或回退到min-height: 100%+object-fit: cover - 别依赖
top: 50%; transform: translateY(-50%)居中文字——缩放、横屏、zoom都会让它偏移 - 用
display: flex; align-items: center; justify-content: center把文字内容居中，它不依赖父容器具体高度
