video有黑边是因为object-fit只控制裁剪方式，未确保video铺满父容器；需同时设置video宽高100%、父容器fixed定位并用dvh、body无margin和隐藏横向滚动条。
video加object-fit: cover为什么还是有黑边？
因为object-fit只管“怎么裁”，不管“有没有真铺满”。常见错误是只写了object-fit: cover，却没让video自身占满父容器，或父容器本身尺寸不明确。
必须同时满足三点：
-
video标签显式设置width: 100%; height: 100%（不能只靠100vw/100vh） - 父容器用
position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh（dvh比vh稳，iOS地址栏收放时不抖） -
body { margin: 0; overflow-x: hidden; }——漏掉overflow-x: hidden，安卓微信和Safari竖屏必出横向滚动条
Flex布局里video自适应失效怎么办？
当video直接作为display: flex子项时，即使写了max-width: 100%，也常被默认的min-width: auto锁死宽度，导致无法缩小。
这不是CSS写错了，而是flex布局优先级更高。稳妥解法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 给
video加flex: 0 1 auto（不放大、可缩小、基准为内容尺寸） - 更推荐：外层套
<div class="video-wrapper">，让容器承担flex占位职责，video只管自身响应式
绝对不要同时写width: 100%和flex: 1——这会冲突，导致尺寸计算异常。
全屏API调用后object-fit失效是正常现象
调用video.requestFullscreen()后，浏览器进入原生全屏模式，video脱离CSS流，所有样式（包括object-fit）被忽略，显示为原始比例+黑边。
这不是bug，是规范行为。应对方式很明确：
- 不要依赖
object-fit控制原生全屏状态下的画面 - 若需系统级全屏，改用
video.webkitEnterFullscreen()（iOS）唤起原生控件，由系统裁剪 - 若必须自定义全屏样式（如隐藏控件、铺满），只能用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh模拟，并监听fullscreenchange事件切换类名
注意：模拟全屏下object-fit: cover才真正起效，但需确保video父容器是fixed定位且无padding/margin干扰。
老Android WebView或iOS 14.5以下怎么降级？
aspect-ratio在iOS 14.5以下或Android 4.4 WebView中不可靠，必须 fallback。最稳方案仍是padding-bottom技巧：
- 外层容器设
position: relative; width: 100%; padding-bottom: 56.25%; height: 0（16:9 → 9 ÷ 16 × 100%） -
video设position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain（完整显示，可能有黑边）或cover（无黑边但可能裁剪边缘） - 该方法在
flex容器中也稳定，不会被flex: 1拉伸破坏比例
关键细节：确保video标签不带原生width或height属性（如width="1920"），否则会覆盖CSS计算。
