直接给<video>加object-cover不会实现响应式全屏背景，因为它只控制内容裁剪，不解决容器尺寸、定位、自动播放限制等关键问题；必须配合position: fixed/absolute、inset-0、min-h-[100dvh]、autoplay muted playsinline loop及父容器relative等条件才能生效。
直接给 <video> 加 object-cover 不会实现响应式全屏背景，它只管内容裁剪，不管容器尺寸和播放条件。
为什么 object-cover 单独用没效果
object-cover 是 object-fit: cover 的快捷类，它不改变元素自身尺寸，只控制视频帧如何填进当前盒模型。如果父容器没设高度、没脱离文档流，或者 <video> 没加 autoplay muted loop playsinline，结果就是黑边、首帧卡住、或移动端跳转全屏。
- 常见错误：只写
<video class="object-cover w-full h-full">，但父<div>是默认height: auto，视频只占内容高度 - 更隐蔽的问题：父容器用了
flex但没设min-h-screen，内容少时塌缩，object-cover失效 - iOS 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 提供定位上下文。
- 漏掉
relative：视频会相对于<body>定位，若 body 有 margin 或滚动条，就偏移或漏边 - 误用
fixed：虽能铺满，但脱离文档流，可能干扰 sticky 导航或滚动监听逻辑 -
overflow-hidden应加在父容器上，不是<video>上——否则裁剪溢出部分仍可见
必须加的四个播放属性：autoplay muted loop playsinline
现代浏览器（Chrome、Safari、Firefox）默认禁止有声自动播放。不加 muted，视频大概率停在首帧；不加 playsinline，iOS Safari 会强制跳全屏；不加 loop，播完就黑屏。
立即学习“前端免费学习笔记（深入）”；
-
muted必须显式声明，不能靠 JS 后续设置（浏览器策略在加载阶段就拦截） -
autoplay只在静音前提下触发，单独加无效 - 建议额外加
preload="metadata"，加速首帧渲染，避免白屏等待
响应式比例容器用 aspect-video + max-w- 控制宽度
想让视频在不同屏幕下保持 16:9 比例并限制最大宽度，用 aspect-video 比手动算 padding-bottom 更可靠，但要注意兼容性和 display 类型。
-
aspect-video在 Firefox 89+、Chrome 88+、Safari 15.4+ 原生支持；旧版 Chrome 不支持 - 该类对
display: inline无效，建议显式加block，如block aspect-video - 别在
flex容器的直接子项上单独依赖aspect-ratio——子项默认是display: flex，此时aspect-video失效 - 大屏下加
max-w-4xl mx-auto防止视频过宽失真，移动端自动收缩
真正容易被忽略的是：object-cover 一定会裁剪，这不是 bug，是设计行为——所谓“全屏覆盖”，本质是用视频中心区域填满视口，上下或左右必然丢内容。
