必须为video元素直接设置position: fixed、width: 100vw、height: 100dvh、object-fit: cover、object-position: 50% 30%、display: block，并配合body{margin:0;overflow-x:hidden}，才能真正全屏铺满、不拉伸、无黑边且裁切精准。
直接给 video 元素设 position: fixed + width: 100vw + height: 100dvh + object-fit: cover，再补上 body { overflow-x: hidden; margin: 0; }，才能真正铺满、不拉伸、无黑边。只写 object-fit: cover 是无效的。
video 必须自己 fixed，不能靠父容器
很多人把 video 套在 <div class="bg"> 里，然后只给 div 设 <code>position: fixed，结果视频还是缩在左上角。因为 object-fit 是作用在 video 自身的，它的裁剪行为取决于它自己的盒模型尺寸和定位方式。
-
video必须直接设position: fixed; top: 0; left: 0; right: 0; bottom: 0;（四边写全，避免横屏切换偏移） - 别用
width: 100%; height: 100%;——它依赖父级包含块，在 fixed 定位下容易失准，且会强制拉伸破坏比例 - 必须用
width: 100vw; height: 100dvh;（dvh比vh稳，iOS 地址栏收放时不跳变） - 加
display: block;，否则 Safari 下object-fit可能不生效
object-fit: cover 不是万能的，得配好容器尺寸和裁切焦点
object-fit: cover 的作用只是“按比例缩放并裁切”，它不会帮你撑开空间。如果容器本身没占满视口，裁之前就已留空，黑边/滚动条必然出现。
-
video必须同时设object-fit: cover;和object-position: 50% 30%;（用百分比微调裁切中心，避免人脸或关键内容被切掉） - 不要只靠
width: 100vw; height: 100dvh;就完事——漏掉body { margin: 0; overflow-x: hidden; }，安卓微信和 Safari 竖屏必出横向滚动条 - 若想让视频“刚好完整显示”（不留黑边但可能有上下/左右留白），改用
object-fit: contain，但这不是“铺满”需求
移动端自动播放失败？HTML 属性一个都不能少
CSS 再完美，视频播不出来也是白搭。iOS 和 Android WebView 对自动播放有硬性拦截规则，缺任意一项，大概率卡首帧、跳原生全屏或静音失败。
立即学习“前端免费学习笔记（深入）”；
-
<video autoplay muted playsinline webkit-playsinline preload="metadata"></video>—— 这四个属性缺一不可 -
muted是前提，不是可选项；playsinline防止 iOS 跳转原生播放器，否则position: fixed失效 -
preload="metadata"比"auto"更稳妥：只加载时长、宽高信息，支撑object-fit计算，又不预载画面帧 - 别指望纯 CSS 解决播放问题，JS 补
video.play().catch(() => {})是兜底手段，但 HTML 属性是基础
最易被忽略的是 overflow-x: hidden 和 object-position 的组合：前者管“不溢出”，后者管“裁哪儿”。很多人调好了尺寸却没调裁切点，关键内容一进视口就被切掉，还以为是视频源问题。
