直接给video元素设position: fixed、min-width: 100vw、min-height: 100dvh、object-fit: cover、object-position: center、display: block和z-index: -1，并确保其祖先无transform等触发层叠上下文的属性，才能实现真正全屏背景视频。
直接用 object-fit: cover 配合 position: fixed 和 z-index: -1 是可行的，但多数人卡在“视频没真铺满”或“内容被遮住”，问题不在属性本身，而在它们的生效条件被悄悄破坏。
video 元素必须脱离文档流才能真正全屏
很多人把 <video></video> 放进一个 <div class="bg"> 里，然后只给这个 div 设 <code>position: fixed——这没用。object-fit 是作用在 <video></video> 自身的，而它的尺寸行为取决于它自己的定位方式。
-
position: fixed必须加在<video></video>标签上，不是父容器 - 不能依赖父容器撑高宽；
<video></video>要自己设min-width: 100vw; min-height: 100dvh;（dvh比vh更稳，避开 iOS Safari 地址栏缩放导致的高度塌陷） - 别写
width: 100%; height: 100%——它会强制拉伸，破坏原始比例 - 加
display: block，否则某些浏览器下object-fit不生效
z-index: -1 不是万能的，它会被层叠上下文截断
设了 z-index: -1 却发现视频还是盖在文字上面？大概率是父级无意中创建了新层叠上下文，比如加了 transform、opacity: 0.99 或 will-change。这时 z-index: -1 在子元素里会被“截断”，失效。
-
z-index只对position值为relative、absolute或fixed的元素生效；static下设了也白搭 - 更可靠的做法：给
<video></video>设z-index: -1，同时给内容区域（比如<main></main>或<header></header>）显式设z-index: 1 - 避免在
<video></video>的任意祖先上设置transform、opacity 、<code>filter等会触发新层叠上下文的属性
object-fit: cover 裁切位置不可控？用 object-position 微调
object-fit: cover 会等比缩放并裁剪，但默认从左上角开始覆盖。如果视频里有人脸或 logo 在中央，很可能被裁掉。
- 加
object-position: center让关键内容居中对齐（默认值就是center，但显式写上更保险） - 需要偏移时可用像素或百分比，比如
object-position: 20% 30%，X 轴 20%，Y 轴 30% - 注意：这个偏移是相对于视频自身内容框，不是视口
- 移动端 Safari 对
object-position支持良好（iOS 12+），不用额外 polyfill
移动端自动播放必须静音，且需 JS 显式调用 play()
即使写了 autoplay 和 muted，iOS Safari 和部分 Android 浏览器仍可能拒绝自动播放，尤其是页面加载后未发生用户手势时。
- 必须加
muted、playsinline、preload="metadata" - 在 DOM 加载完成后，用 JS 调用
video.play()；捕获可能的拒绝错误，避免阻塞逻辑 - 示例：
const video = document.querySelector('video');<br>video.play().catch(e => console.warn('Autoplay prevented:', e)); - 别忘了加
viewport-fit=covermeta 标签，尤其在 iOS 上防止安全区留白
真正难的不是写对那几行 CSS，而是确保 object-fit 的作用对象是脱离文档流的、尺寸可控的、不被层叠上下文干扰的 <video></video> 元素本身——任何一环松动，都会让“全屏背景”变成半屏黑边或错位裁切。
