video上设aspect-ratio: 16 / 9无效，因其是替换元素，浏览器直接忽略；必须用div包裹并设aspect-ratio、width: 100%、移除内联宽高属性，再让video设width: 100%; height: 100%; object-fit: cover。
aspect-ratio 能用，但不能直接写在 video 或 iframe 上——它只对块级容器生效，且旧版 Safari（iOS 15.3 及更早）完全不支持。稳妥方案是双轨：现代浏览器用 aspect-ratio，老环境回退到 padding-top。
为什么 video 上设 aspect-ratio: 16 / 9 没反应
因为 video 是替换元素（replaced element），浏览器会忽略对其设置的 aspect-ratio，哪怕语法正确。常见现象是容器高度塌为 0，或视频横向拉成一条线。必须用一层 div 包裹，把 aspect-ratio 写在 wrapper 上。
- 移除
video标签里内联的width和height属性（如width="640"），否则会覆盖 CSS 控制 - wrapper 必须是块级容器：
display: block或display: grid；避免放在display: flex父容器中，Safari 15.4–16.3 会忽略其aspect-ratio - 语法只能是
16 / 9，不是16:9或1.777
padding-top: 56.25% 怎么写才不撑开容器
这个技巧依赖 padding 百分比以父宽为基准计算的特性，但极易因 height 设置错误而失效。
- 容器必须设
position: relative和height: 0—— 若设height: auto或没设 height，padding-top会额外增加高度，导致比例错乱 -
video或iframe必须用position: absolute，且top: 0; left: 0; width: 100%; height: 100%才能填满空白区域 - 别给 wrapper 加
min-height或line-height，它们会干扰padding-top的高度生成逻辑
object-fit: cover 为什么加了也没变化
它只在“有明确宽高”的块级上下文中起作用。如果 video 父容器高度由内容撑开（比如默认 display: block），object-fit 就无从裁剪。
- 确保 wrapper 有确定高度：要么靠
aspect-ratio，要么靠padding-top + height: 0 -
video自身必须设width: 100%; height: 100%，否则即使object-fit生效，也可能只显示左上角一小块 - 移动端 Safari 支持良好，但 Android WebView ≤4.4 不支持
object-fit，需 JS 监听resize手动缩放
全屏时黑边或拉伸怎么处理
原生全屏（点击右下角按钮）下，浏览器绕过 CSS 控制，按视频原始宽高比渲染。若源文件不是 16:9，必然出现黑边；强行用 width: 100vw 又会导致失真。
立即学习“前端免费学习笔记（深入）”；
- 优先用
poster属性提供首帧图，并确保该图比例与视频一致 - 监听
webkitbeginfullscreen和fullscreenchange，在全屏态动态加object-fit: contain（保完整）或cover（去黑边） - 避免对
video:-webkit-full-screen写死宽高，不同系统全屏容器结构不同，容易错位
width: 100% 继承自父容器。如果父容器有 padding、max-width 或是 flex 子项未设 min-width: 0，wrapper 宽度就可能异常，导致比例整体偏移。这不是 bug，是盒模型链式计算的结果。 
