用 padding-top: 56.25% + position: relative/absolute 实现 16:9 容器，确保 video 有明确宽高后 object-fit: cover 才生效；aspect-ratio 更简洁但 ios 15.3 及更早不支持，需降级。
视频容器如何保持 16:9 比例不随屏幕拉伸变形
直接靠 width: 100% + height: auto 会失效——视频元素本身不继承父容器的宽高比，且 video 标签默认是“内容驱动”的，不是“容器驱动”的。
核心解法是用 padding-top 配合绝对定位撑开容器高度。原理：padding 百分比值以父容器宽度为基准，所以 padding-top: 56.25%（即 9/16）就能强制生成一个 16:9 的空白区域。
- 父容器设
position: relative - 内部包裹一层
div，设padding-top: 56.25%、height: 0 -
video元素设position: absolute，并用top/left/right/bottom: 0拉满 - 别忘了加
width: 100%和height: 100%到video上，否则可能只显示左上角一小块
为什么 object-fit: cover 必须配合绝对定位才生效
很多同学加了 object-fit: cover 却发现没变化，是因为它只在“有明确宽高的块级容器”里起作用。如果父容器高度由内容撑开（比如默认的 display: block），video 实际渲染高度还是按原始尺寸，object-fit 就无从裁剪。
- 必须确保
video的父容器有确定的高度（如通过padding-top+height: 0间接设定） -
video自身需设position: absolute，否则object-fit在非替换元素常见布局中会被忽略 - 移动端 Safari 对
object-fit支持良好，但老版 Android WebView（≤4.4）不支持，需降级为 JS 监听 resize 手动缩放
移动端全屏时如何避免黑边或拉伸
原生全屏（点击右下角全屏按钮）下，浏览器会绕过 CSS 控制，直接按视频原始宽高比渲染。如果视频本身不是 16:9，就会出现上下/左右黑边；若强行用 width: 100vw 覆盖，又会导致失真。
- 优先用
video的poster属性提供首帧图，并确保该图比例与视频一致 - 监听
webkitbeginfullscreen/fullscreenchange事件，在全屏态动态给video加object-fit: contain（保留完整画面）或cover（填满无黑边） - 避免在 CSS 中对
video:-webkit-full-screen写死宽高，不同系统全屏容器结构不同，容易错位
用 aspect-ratio 替代 padding 技巧是否可行
可以，但兼容性是硬伤：aspect-ratio 在 Chrome 88+、Firefox 89+、Safari 15.4+ 支持，但 iOS 15.3 及更早版本 Safari 完全不识别。
- 现代写法：父容器直接设
aspect-ratio: 16/9，再配width: 100%，video设width: 100%; height: 100%; object-fit: cover - 要兼容旧环境，仍得回退到
padding-top方案，不能只靠@supports包裹——因为 Safari 15.3 会解析@supports (aspect-ratio: 1/1)为 true，但实际不生效 - 若项目已用 PostCSS 或构建工具，可用
postcss-aspect-ratio插件自动补全padding-top逻辑
真正麻烦的不是写法本身，而是视频源分辨率不确定、横竖屏混用、以及某些安卓厂商浏览器对 position: absolute 在全屏态下的重绘异常——这些没法靠一套 CSS 解决，得结合 JS 做兜底检测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
