必须同时设置 object-fit: cover、object-position: center、明确宽高及避开移动端 safari 的 vh 坑，否则视频会偏移、裁切关键区域或底部留白。
直接用 object-fit: cover 不够，必须配 object-position: center + 明确宽高 + 避开移动端 Safari 的 vh 坑，否则视频会偏移、裁切关键区域或底部留白。
video 元素必须显式设置 width 和 height
object-fit 不是魔法，它只控制“内容如何适应盒子”，但前提是盒子本身有明确尺寸。如果只写 width: 100% 却没给父容器定高，或者依赖 height: auto，object-fit: cover 就不会生效——浏览器根本不知道要“cover”到多大。
- 给
video设置width: 100%; height: 100%（不是100vh，见下条） - 父容器必须有确定高度：比如
min-height: 100vh或固定像素（height: 600px） - 避免父容器用
display: flex但没设align-items: stretch，否则子元素可能不占满高度
移动端 Safari 的 100vh 是个假朋友
在 iOS Safari 中，地址栏收起/展开时会动态改变视口高度，100vh 会被错误计算（比如把地址栏高度也算进去），导致视频被截顶或底部多出滚动条。
- 改用
min-width: 100vw; min-height: 100vh，再配合object-fit: cover，让视频主动撑满而非被动适配 - 加
position: fixed可绕过部分布局干扰，但需确保父级无transform或will-change，否则会创建新层叠上下文，z-index 失效 - 必须加
playsinline muted autoplay，否则 iOS 会强制全屏播放且静音无效
裁剪居中靠 object-position，不是靠 margin 或 transform
object-fit: cover 默认从左上角开始覆盖，不居中——这是最常被忽略的一点。仅靠 width/height + cover，视频主体（比如人脸）很容易被切掉一半。
- 必须显式写
object-position: center（等价于50% 50%） - 不要试图用
top: 50%; left: 50%; transform: translate(-50%, -50%)去“居中” video，这会让定位脱离object-fit的坐标系，反而错位 - 若需微调（比如突出人物上半身），可改用
object-position: center top或具体像素值如50% 30%
双格式 + preload 是保底刚需
单靠 MP4 在某些安卓机或旧版 Chrome 上会黑屏或加载失败，尤其配合 autoplay 时。
- 提供双源：
<source src="bg.mp4" type="video/mp4"></source>+<source src="bg.webm" type="video/webm"></source> - 加
preload="metadata"（不是auto），减少首帧等待时间，又不浪费流量 - 服务端建议用 H.264 Baseline Profile 编码，兼容性比 High Profile 更稳
真正卡住的往往不是 object-fit 本身，而是它和 vh、position、autoplay 这三者的组合副作用——任何一个没对齐，视频就可能偏、空、卡、黑。动手前先确认这四个点是否全部闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
