video不能直接设position: absolute，因其脱离文档流且无定位上下文，会飞至左上角；必须用position: relative容器配合padding-bottom撑高，并让video四边归零+object-fit-cover填满。
video 直接设 position: absolute 会跑偏到页面左上角，根本不是你想要的“自适应16:9”——因为它的定位上下文缺失，且高度塌陷。必须用外层容器撑高、锚定，再让 video 精确填满。
为什么 video 不能直接加 position: absolute
它默认是 inline 替换元素，不创建定位上下文；一旦设 position: absolute，浏览器就向上找最近的 position: relative 祖先——多数情况下是 body，于是视频飞到左上角，还可能被裁切。更关键的是：height: auto 在绝对定位下完全失效，video 高度要么塌成一条线，要么溢出不可控。
.video-wrapper 必须同时满足三个条件
- 显式声明
position: relative——否则内部video无处锚定 - 不设
height，否则会覆盖padding-bottom的“视觉高度” - 用
padding-bottom: 56.25%撑高（因为 9 ÷ 16 = 0.5625），这个百分比基于父宽计算，才能稳定维持 16:9
video 元素必须四边归零 + object-fit
只写 width: 100%; height: 100% 不够：
- 漏掉
top: 0; left: 0→ 视频在容器内偏移、留白 - 没加
object-fit→ 源视频比例不匹配时拉伸变形（比如竖屏 MP4 塞进横屏容器） - 误用
object-fit: fill→ 强制拉伸，人脸变宽、文字压扁，慎用 - 推荐组合：
object-fit: cover+object-position: center，尤其适合封面类视频
移动端和旧浏览器的真实断点在哪
这个方案兼容性极好（IE9+ 都支持），但有两个硬伤常被忽略：
- iOS Safari 中，若没加
playsinline属性，点击播放会强制跳转原生全屏，导致绝对定位容器失效、按钮消失 - 安卓某些 WebView 对
padding-bottom计算不准，建议加min-height: 200px保底 - 所有子元素（如自定义播放按钮、加载骨架）都必须依赖同一套
position: absolute+transform: translate(-50%, -50%)居中逻辑，否则位置全乱
真正容易被忽略的是：这个布局方式下，video 已脱离文档流，所有交互层、蒙版、按钮都得手动定位——稍一疏忽，就变成“能播但点不到暂停”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
