object-fit: cover 单独无效，因它仅控制内容缩放裁切，不解决父容器未铺满视口的问题；必须配合 position: fixed、top: 0; left: 0; width: 100vw; height: 100vh、display: block 及 muted autoplay loop playsinline 等约束才能实现真正全屏响应式背景视频。
直接给 <video></video> 加 object-fit: cover 不够，必须配合 position: fixed、清除默认 margin、显式宽高约束，否则黑边/拉伸/滚动条必现。
为什么 object-fit: cover 单独用没效果？
浏览器先按 <video></video> 自身宽高比撑开父容器（比如 body），再裁剪——如果父容器没强制铺满视口，object-fit 就只是“在一块小区域里裁”，不是“全屏覆盖”。常见错误包括：
- 把
<video></video>直接塞进body，没设body { margin: 0 }，导致顶部/侧边留白 - 父容器用
height: 100%而非100vh，高度继承链断裂（尤其嵌套 flex 容器时） - 忘了
display: block，部分浏览器下object-fit对内联级<video></video>失效
position: fixed 是硬性前提，不是可选项
只有 fixed 才能真正脱离文档流、无视滚动、覆盖整个视口。用 absolute 或 relative 都会受父容器尺寸和定位上下文干扰：
- 必须写
top: 0; left: 0; width: 100vw; height: 100vh，不能只靠width: 100%; height: 100% - 移动端 Safari 会把地址栏高度算进
vh，所以更稳的是min-width: 100vw; min-height: 100vh配合object-fit: cover - 加
z-index: -1前，确保没意外创建层叠上下文（比如父元素有opacity或transform）
自动播放和静音是绕不开的兼容性门槛
Chrome、Safari、Firefox 全部强制要求：无声自动播必须带 muted 和 autoplay，缺一不可。典型报错就是：
DOMException: play() failed because the user didn't interact with the document first
- 必须写
<video muted autoplay loop playsinline></video>；iOS 必须playsinline，否则强跳全屏 - Android WebView 可能仍拦截，加
loop保持续播，同时准备poster图片 fallback - 别依赖 JS 后续调用
play()—— 用户没交互前，多数浏览器直接拒绝
文字看不清？这不是 z-index 能解决的问题
视频明暗变化大，纯白/黑文字在某些帧会完全不可读。遮罩层不能只用单色 ::before，得主动控对比度：
- 用
background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5))叠在<video></video>上，比纯黑遮罩更自然 - 文字容器加
isolation: isolate，避免mix-blend-mode在某些场景下失效 - 别用
width: 100%; height: 100%强撑尺寸，优先走min-width: 100vw; min-height: 100vh+object-fit: cover
真正难的不是写几行 CSS，而是每一步都得同时满足：视口覆盖、比例保持、自动播放合规、文字可读、移动端不闪退。漏掉任意一环，用户看到的就是黑边、卡顿或一片空白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
