object-cover 对全屏背景视频不起作用是因为它只控制视频内容在其自身盒模型内的缩放填充，而全屏需父容器占满视口、video 绝对定位铺满、并启用 object-cover 三者缺一不可。
为什么 object-cover 对全屏背景视频不起作用？
因为 object-cover 是作用在 <video> 元素自身的 CSS 属性（对应 object-fit: cover），但它只控制视频内容如何填充其**自身盒模型**，而全屏效果依赖的是父容器的尺寸和定位逻辑。如果父容器没设高宽、没脱离文档流，video 再怎么 object-cover 也撑不满屏幕。
实现全屏背景视频的最小必要结构
必须同时满足三个条件：父容器占满视口、video 绝对定位并拉满、启用 object-cover。
- 用
<div class="relative w-full h-screen overflow-hidden">作为包裹容器（h-screen确保高度为 100vh，relative为子元素定位提供上下文） -
<video>加上class="absolute inset-0 w-full h-full object-cover"（inset-0等价于top-0 right-0 bottom-0 left-0，强制铺满父容器） - 务必加
autoplay muted loop playsinline属性——现代浏览器禁止自动播放有声视频，不加muted会导致视频卡在首帧
示例片段：
<div class="relative w-full h-screen overflow-hidden">
<video class="absolute inset-0 w-full h-full object-cover" autoplay muted loop playsinline>
<source src="/bg.mp4" type="video/mp4">
</video>
</div>
常见错误：背景被裁切或留黑边
这通常不是 object-cover 的问题，而是视频原始宽高比与屏幕不匹配时的预期行为。它确实会“覆盖”整个区域，但可能裁掉上下或左右部分内容。
立即学习“前端免费学习笔记（深入）”；
- 若想优先显示视频中心区域且避免关键内容被裁，可在
video上加class="object-center"（等价于object-position: center） - 若视频是横屏拍摄但页面竖屏展示，
object-cover必然裁掉顶部/底部；此时应准备两个版本的视频（横版 + 竖版），用媒体查询切换：@media (orientation: portrait) { ... } - 不要给
video设max-w-none或min-h-screen——这些会破坏inset-0的精确覆盖逻辑
性能与兼容性注意点
全屏视频对移动端尤其敏感。iOS Safari 要求 playsinline 才允许内联播放，否则会跳转全屏；Android Chrome 则对自动播放更宽松但仍有静音要求。
- 视频格式优先用 MP4（H.264 编码），避免 WebM 在旧版 Safari 失效
- 务必压缩体积——用
ffmpeg降分辨率（如 1080p → 720p）、降低码率（-b:v 1500k），否则首帧加载延迟明显 - 可加
poster属性指向封面图：poster="/bg-poster.jpg"，防止加载空白闪动 - Tailwind 默认不生成
object-position工具类，如需自定义焦点（比如object-[20%_30%]），得手动扩展theme.extend.objectPosition
真正难的不是加 object-cover，而是让视频在各种设备上稳定铺满、不卡顿、不弹出系统全屏界面——这些细节往往比类名本身更消耗调试时间。
