video设absolute失败因父容器缺position:relative，导致其定位到body左上角；须用padding-bottom技巧撑高relative父容器，并设video四边归零+object-fit。
为什么直接给 video 加 position: absolute 会失败
因为 video 默认是 inline 替换元素，不创建定位上下文；直接设 position: absolute 会让它脱离文档流，但父容器没有 position: relative 时，它会向上找最近的定位祖先——经常跑到 body 顶部左上角，甚至被裁切。更糟的是，height: auto 在绝对定位下完全失效，视频高度塌陷或溢出不可控。
外层容器必须设 position: relative 并用 padding-bottom 撑高
这是 padding-bottom 技巧的核心前提：
-
padding-bottom百分比值基于父容器宽度计算，所以padding-bottom: 56.25%精确对应 16:9 宽高比（9 ÷ 16 = 0.5625） - 容器需显式设
position: relative，否则内部absolute的video无处锚定 - 容器本身不能设
height，否则会覆盖 padding 带来的“视觉高度”
示例结构：
.video-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
video 必须四边归零 + object-fit 显式声明
只写 width: 100%; height: 100% 不够，常见错误包括：
- 漏掉
top: 0; left: 0→ 视频在容器内偏移、留白 - 没加
object-fit→ 源视频比例不匹配时拉伸变形（比如竖屏 MP4 塞进横屏容器） - 用
object-fit: fill→ 强制拉伸，人脸变宽、文字压扁，慎用
推荐组合：object-fit: cover（填满+裁切）配 object-position: center（保焦点居中），尤其适合封面类视频。
移动端和旧浏览器的兼容性断点在哪
这个方案本质是 CSS hack，兼容性极好（IE9+ 都支持），但要注意两个真实陷阱：
- iOS Safari 中，若没加
playsinline属性，点击播放会强制跳转原生全屏，导致绝对定位容器失效、按钮消失 - 安卓某些 WebView 对
padding-bottom计算不准，建议配合min-height保底（如min-height: 200px） - 如果项目已用现代 CSS，别硬套此法——
aspect-ratio更干净，但 Safari 15.4 之前不支持，且不能直接写在video上（对替换元素无效）
真正容易被忽略的是：这个布局方式下，所有子元素（比如自定义播放按钮、加载骨架）都必须依赖同一套 position: absolute + transform: translate(-50%, -50%) 居中逻辑，否则位置全乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
