video全屏需video元素直接fixed定位并设top:0;left:0;width:100vw;height:100dvh;display:block;object-fit:cover;同时清body外边距、加muted/autoplay/playsinline属性，避免层叠上下文干扰z-index。
object-fit: cover 本身不负责“覆盖”，它只管视频内容怎么缩放填满盒子——而那个盒子，得你亲手撑满视口。
video 元素必须脱离文档流才能真正全屏
很多人把 <video></video> 套在 <div class="bg"> 里，然后给 div 设 <code>position: fixed，结果视频还是只占左上角一小块。问题出在： object-fit 是作用在 <video></video> 自身的，它的尺寸行为取决于它自己的定位方式。
-
<video></video>必须直接设position: fixed（不是父容器） - 必须配
top: 0; left: 0;，否则锚点偏移，视觉上就“没铺满” - 用
width: 100vw; height: 100dvh;（不是100%），dvh比vh更稳，避开 iOS Safari 地址栏缩放导致的高度塌陷 - 别写
width: 100%; height: 100%;——它会强制拉伸，破坏原始比例
为什么 object-fit: cover 加了还是有黑边
根本原因是浏览器先按视频原始宽高比（比如 16:9）撑开空间，再裁剪。如果容器本身没强制占满视口，裁剪前就已留空。
- 清掉
body { margin: 0; }，默认外边距会挤出白边 -
<video></video>必须设display: block;，否则 Safari 下object-fit可能不生效 - 加
pointer-events: none;，否则视频层会拦截点击，按钮点不到 - 黑边不是 bug，是
cover的正常行为——它优先保比例，裁掉多余部分；若要完整显示，改用contain，但必然留黑边
移动端自动播放失效的硬性条件
这不是 CSS 能绕开的问题，而是浏览器策略：iOS 和 Android Chrome 都强制要求静音 + 内联播放 + 用户交互（或至少声明属性）才能启动。
-
<video></video>必须同时带autoplay、muted、playsinline（iOS 必需）和webkit-playsinline - 漏掉
playsinline，Safari 会跳转原生全屏播放器，position: fixed失效，整个背景崩掉 -
preload="metadata"比auto更稳妥：只加载时长、尺寸等元信息，支撑object-fit计算，又不预载画面帧 - 错误信息如
DOMException: play() failed because the user didn't interact with the document first就是典型提示
z-index: -1 失效的常见原因
z-index: -1 看似简单，但它极易被父级无意中创建的新层叠上下文截断。
- 检查
<video></video>的任意祖先是否用了transform、opacity 、<code>filter或will-change——这些都会触发新层叠上下文，让z-index: -1在子元素里失效 - 更可靠的做法：给
<video></video>设z-index: -1，同时给内容区域（比如<main></main>）显式设z-index: 1 - 不要嵌套
<video></video>在带transform的模态框或滚动容器里；真要用，把它提到直接子级
