CSS响应式视频全屏黑边排版问题解决方案

先说几个核心判断：黑边问题，锅还真不在 object-fit: cover 身上。它只是个“裁切指令”，管的是画面怎么适配容器，但容器本身有没有铺满视口，它可管不了。你猜怎么着？很多时候，视频明明设了 cover，黑边还是冒出来了，根源就在于盒子模型、定位和加载策略这三个环节，漏了哪一个都不行——不是留白边，就是出滚动条。

body 和父容器的 margin/overflow 必须重置

浏览器默认给 body 加了 8px 的 margin，这事估计很多人没当回事。但就这 8px，哪怕视频尺寸拉得再满，也会漏出一道白边——视觉上经常被误认为是黑边。更麻烦的是，在安卓微信和 Safari 竖屏模式下，如果漏掉 overflow-x: hidden，横向滚动条就会不请自来，右侧凭空多出一块不可见的黑区。

• body { margin: 0; overflow-x: hidden; } —— 这是底线，不能省，也没有讨价还价的余地。
• 别偷懒把 html 或 body 直接当视频父容器。它们还在文档流里，宽高继承机制根本不靠谱。
• 视频的直接父容器（比如一个

  ）必须设为 position: fixed，同时 top: 0; left: 0; width: 100vw; height: 100dvh;。

• 100dvh 比 100vh 稳得多：iOS 地址栏收放时不会跟着抖动，Safari 横屏切换也不会再偏移。

video 元素自身的 display 和尺寸必须显式声明

video 默认是 display: inline，这事坑过不少人。部分 Android 浏览器和旧版 Safari 里，object-fit 对 inline 元素根本不起作用。更关键的是，如果不设 width 和 height，object-fit 就失去了计算的基准，等于白设。

• video { display: block; width: 100%; height: 100%; object-fit: cover; } —— 这四条是配套的，缺一不可。
• 千万别在 video 上写 width: 100vw; height: 100vh。它会覆盖 object-fit 内部的缩放逻辑，导致裁剪错位，画面歪得亲妈都不认识。
• iOS 12 及更早的版本，得额外加上 -webkit-object-fit: cover;。
• 避开 object-fit: fill。它会强行拉伸画面，确实没有黑边了，但画面也彻底变形了——这不是“去黑边”，是“毁画面”。

autoplay 失败不是 JS 问题，是 HTML 属性组合缺位

现代浏览器在这方面态度很一致：Chrome、Safari、Firefox，全都不允许无声自动播放，除非四个关键属性同时到场。少一个，视频就卡在首帧，或者直接跳转到原生全屏播放器，再不然就是给你报一个 DOMException: play() failed because the user didn't interact with the document first。这不是 JS 能解决的，得从 HTML 属性组合入手。

• autoplay —— 必须显式写上，不是可选项。
• muted="true" —— 显式写 true 比空值 muted 更稳妥，iOS Safari 对空值的解析不太统一。
• playsinline —— iOS Safari 强制内联播放的关键，Chrome Android 也依赖它。
• preload="metadata" —— 别用 preload="none"，否则页面滑到时视频还没加载完，首帧出现延迟，视觉上就是突兀的黑屏。
• loop 建议顺手加上：Firefox 如果不加，可能只播一帧就停住；Chrome 95+ 虽然允许，但行为不能保证完全一致。

移动端横屏抖动、iOS 地址栏干扰、低端机卡顿——这些细节最容易被忽略

你以为调好 CSS 就完事了？实际部署时，真正的坑往往藏在这些细节里。

• Safari 的 100vh 会随地址栏收放动态变化，导致高度频繁抖动，object-fit 的锚点不断重算，画面出现明显的“抽帧”感。唯一的解法就是换成 100dvh。
• 全屏视频持续解码渲染，对低端安卓机来说负担很重，发热、卡顿甚至崩溃都不罕见。分辨率别超过 1920×1080，手机端最好准备一个 720p 的独立版本，用 配合媒体查询来做切换。
• IE11 完全不支持 object-fit，需要兼容的话，得用 transform: scale() 加负 margin 模拟，但维护成本极高，建议直接降级为背景图处理。
• 视频格式优先选 .mp4（H.264 编码），.webm 作为备选。尽量避开 .mov 或未压缩的 A VI，兼容性和加载效率都不理想。