仅加 object-cover 无法实现全屏背景视频，因其只控制内容裁剪缩放，不解决父容器未铺满视口、video未脱离文档流、缺少 autoplay/muted/playsinline 等硬性播放条件的问题。
inset-0 + object-cover 能实现全屏背景视频，但必须配齐三个条件：父容器 relative + h-screen、video 绝对定位铺满、autoplay muted loop playsinline 缺一不可；否则不是黑边就是卡首帧。
为什么只加 object-cover 没用
object-cover 是 object-fit: cover 的快捷类，它只控制视频内容如何填进自己的盒模型，不负责把盒子本身撑满屏幕。如果父容器没设高度、没脱离文档流，object-cover 就像给一张没装框的画强行裁边——画还在原地，只是你“看”的部分变了。
- 常见错误：给
<video>单独加object-cover w-full h-full，但父<div>是默认的height: auto，结果视频只占内容高度，上下大片留白 - 更隐蔽的问题：父容器用了
flex或grid但没设min-h-screen，在内容少时容器塌缩，object-cover失效 - 移动端 Safari 会因地址栏显示/隐藏导致
h-screen跳变，建议搭配min-h-[100dvh]（Safari 16.4+ 支持）
inset-0 必须配合 relative 父容器
inset-0 是 top-0 right-0 bottom-0 left-0 的简写，但它只对 position: absolute 或 fixed 元素生效，且依赖父容器有 position: relative（或 fixed/absolute）提供定位上下文。
- 漏掉
relative：video 会相对于<body>定位，若 body 有 margin 或滚动条，就偏移或漏边 - 误用
fixed：虽然也能铺满，但会脱离文档流，可能干扰后续 sticky 导航或滚动监听逻辑 - 别加
overflow-hidden在 video 上——它该加在父容器上，否则裁剪溢出部分仍可见
autoplay muted loop playsinline 是硬性要求
现代浏览器（Chrome、Safari、Firefox）默认禁止有声自动播放，不加 muted，视频大概率停在首帧，甚至触发静音图标遮挡画面。
立即学习“前端免费学习笔记（深入）”；
-
autoplay：触发自动播放（但仅当满足静音前提） -
muted：必须显式声明，不能靠 JS 后续设置（浏览器策略在加载阶段就拦截） -
loop：避免播完后黑屏，保持背景连续性 -
playsinline：iOS Safari 强制视频在页面内播放，而非全屏跳转 - 额外建议：加
preload="metadata"加速首帧渲染，避免白屏等待
容易被忽略的裁剪细节
object-cover 一定会裁剪，这是它的设计目的。所谓“全屏覆盖”，本质是用视频中心区域填满视口，上下或左右必然丢内容——这不是 bug，是预期行为。
- 关键内容被裁？加
object-center（等价于object-position: center）确保焦点居中，但无法避免裁剪本身 - 横屏视频在竖屏设备上必然切掉顶部/底部；反之亦然。真要保关键区域，得准备两版视频，用媒体查询切换：
@media (orientation: portrait) - 别用
max-w-none或min-h-screen替代inset-0 w-full h-full——前者破坏绝对定位的精确覆盖逻辑，可能导致边缘像素错位
