为什么padding-top百分比能锁住宽高比
因为padding-top（以及padding-bottom）在块级元素中，其百分比值是相对于**父容器宽度**计算的，不是高度。这个特性被用来“骗”出固定比例的容器：先用padding-top撑开高度，再把内容绝对定位进去，就能让容器始终维持比如16:9、4:3这类比例。
常见错误是直接给video标签设width: 100%; height: auto;——这只能保证等比缩放，但无法约束父容器高度，导致周围布局塌陷或错位。
- 必须用一个包裹容器（比如
div.video-wrapper），它负责锁定比例 -
padding-top值 = (高度 ÷ 宽度) × 100%，例如16:9 →padding-top: 56.25%; - 内部
video需设position: absolute;并铺满，否则会被padding顶下去
怎么写一个真正可用的16:9自适应视频容器
关键不在video本身，而在它的父层结构和定位配合。下面是最小可靠写法：
```css
.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 9 / 16 = 0.5625 */
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}
```注意：video必须设height: 100%，否则在Safari里可能只显示左上角一小块；background建议保留，避免视频未加载时露出空白或父容器背景。
立即学习“前端免费学习笔记（深入）”；
- 如果用
object-fit: cover;控制视频裁剪，加在video上即可 - 不要给
.video-wrapper设height，否则会覆盖padding-top的效果 - 移动端iOS Safari对
video的object-fit支持较晚（iOS 15.4+），旧版本需降级为width: 100%; height: auto;+ JS监听尺寸
遇到video被截断或上下留白怎么办
典型现象是视频只显示中间一部分，或顶部/底部有明显黑边，本质是padding-top算错，或video没真正填满绝对定位区域。
- 检查是否误用了
padding-bottom——它也能用，但逻辑一样，别混用 - 确认
.video-wrapper没有设置border或margin干扰宽度基准（padding百分比基于content box宽度） - 若视频源分辨率不标准（比如竖屏720×1280），
object-fit: cover;会裁边，换contain可全显但留黑边 - 某些框架（如Next.js）默认给
video加display: inline，需显式重置为block或inline-block
用CSS自定义属性动态切比例还安全吗
可以，但要注意兼容性边界。现代浏览器都支持calc()和CSS变量，但padding-top里的变量不能直接参与百分比计算（除非用calc(var(--ratio) * 100%)这种绕法）。
更稳妥的做法是预设几套类名：
```css
.video-16x9 { padding-top: 56.25%; }
.video-4x3 { padding-top: 75%; }
.video-21x9 { padding-top: 42.857%; }
```- CSS变量+
calc()在Chrome 100+/Firefox 95+才稳定支持padding-top: calc(var(--r) * 100%); - 不要依赖JS动态写
style.paddingTop，容易触发重排，且服务端渲染时不可见 - 如果需要响应式切换比例（比如横竖屏），优先用媒体查询配不同
padding-top，而非JS监听
真正麻烦的是嵌入第三方播放器（如YouTube iframe），它的iframe必须走同样wrapper套路，且要确保allowfullscreen存在，不然全屏按钮失效。
