overflow-x: hidden 必须加在 body 上才能防止移动端竖屏下视频横向溢出和滚动条，因为 object-fit: cover 仅控制内容填充方式，不约束盒模型边界；需配合 width/height 显式设置及父容器明确尺寸才真正生效。
overflow-x: hidden 必须加在 body 上，否则视频在移动端竖屏下大概率会横向溢出、触发滚动条——这不是 object-fit 能解决的问题。
为什么 object-fit: cover 不能阻止横向溢出
object-fit 只控制视频内容如何填充其自身盒模型，不约束盒子是否超出父容器边界。移动端（尤其 Safari）对视口宽度的计算存在微小偏差，加上 video 元素默认有内边距或固有比例，即使设了 width: 100% 和 height: 100%，仍可能水平方向多出 1–2px。
- 常见现象：页面右侧出现黑色/空白区域，拖动时才看到是横向滚动条
- 不是所有浏览器都复现，但 iOS Safari 和部分 Android WebView 高概率触发
-
overflow-hidden加在video自身或其父容器上通常无效，因为溢出发生在body层级
body 上加 overflow-x: hidden 的实操要点
这是最轻量、兼容性最好的兜底方案，但要注意写法和时机：
- 必须写在
body元素上，不能只靠html { overflow-x: hidden } - Tailwind 用户直接用
class="overflow-x-hidden"即可，但需确保它作用于body标签（不是某个 div） - 避免与其他
overflow值冲突，比如不要同时设overflow: auto或overflow-y: scroll - 如果页面本身需要纵向滚动，
overflow-x: hidden不会影响overflow-y: auto，两者可共存
配合 object-fit 的必要前提条件
光靠 overflow-x: hidden 是治标，要根治还得让 video 真正“贴住”容器：
-
video必须显式设width: 100%; height: 100%（或top: 0; bottom: 0; left: 0; right: 0+position: absolute） - 父容器要有明确尺寸，比如
height: 100vh或aspect-ratio: 16 / 9；仅靠min-height: 100vh不够稳定 - 禁用
max-width/max-height，它们会干扰cover的裁剪逻辑 - 移动端 Safari 建议加
will-change: transform，缓解横竖屏切换时的重绘卡顿
全屏 API 调用后黑边问题怎么处理
调用 video.requestFullscreen() 后，object-fit 会失效——这是浏览器原生全屏行为，CSS 完全不生效。此时黑边是正常现象，无法用 CSS 修复。
- 唯一可控的是进入全屏前的样式：确保
video在非全屏状态下已正确 cover - 不要试图在
fullscreenchange事件里动态改样式，无效 - 如需真正无黑边的全屏体验，得用
picture-in-picture或 WebXR 等替代方案，但支持度有限
实际中，overflow-x: hidden 加 body 是第一道防线，而 object-fit + 显式宽高 + 父容器尺寸控制是第二道。两层缺一不可，且后者一旦漏掉任意一项，前者就变成“掩盖问题”而非“解决问题”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
