padding-top百分比能撑开容器高度，因其值按父容器宽度计算，实现宽高联动；需外层设padding-top、内层用absolute定位视频，配合object-fit控制填充方式。
为什么用 padding-top 百分比能撑开容器高度
因为 padding 的百分比值是相对于**父容器宽度**计算的，不是高度。当父容器宽度变化时，padding-top 会等比缩放，从而让内部内容区域自动维持长宽比。这是 CSS 唯一原生支持“宽高联动”的机制（aspect-ratio 是新属性，但兼容性差）。
常见错误是直接写 padding: 56.25% 0 0 0 —— 这会让上下左右 padding 都生效，破坏布局。必须只设 padding-top，再用 position: absolute 把视频拉进这个“留白区”。
- 16:9 视频 →
padding-top: 56.25%（9 ÷ 16 = 0.5625） - 4:3 视频 →
padding-top: 75%（3 ÷ 4 = 0.75） - 1:1 正方形 →
padding-top: 100%
如何写出可复用的响应式视频容器结构
核心是两层包裹：外层设 padding-top，内层用 position: absolute 拉满。不能把 video 直接放外层，否则它会撑高容器、破坏比例。
<div class="video-wrapper">
<video controls>
<source src="demo.mp4" type="video/mp4">
</video>
</div>对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}- 外层
.video-wrapper不设高度，靠padding-top占位 -
video必须设position: absolute，否则默认流式布局会叠加在 padding 上方 - 如果容器有 margin 或 border，要额外处理 box-sizing，避免尺寸偏差
遇到 object-fit 裁剪或拉伸怎么办
video 默认会拉伸填满，但源视频比例和容器不一致时，画面会被裁剪或变形。用 object-fit 控制呈现方式，但要注意浏览器兼容性（IE 不支持）。
-
object-fit: contain→ 完整显示，可能有黑边 -
object-fit: cover→ 填满无黑边，但可能裁剪边缘（最常用） -
object-fit: fill→ 强制拉伸，会变形（不推荐）
同时建议加 object-position: center，确保裁剪时居中取景。若需兼容 IE，只能靠 JS 动态计算尺寸或使用 poster 图 + 按钮模拟播放。
为什么 aspect-ratio 还不能完全替代 padding 方案
aspect-ratio: 16 / 9 看起来更直观，但它在 Safari 15.4 以下、Firefox 89 以下、所有 IE 版本中都不支持。而且它只作用于元素自身，不解决“内容如何自适应填充”的问题——你仍得手动处理 video 的定位和缩放。
更关键的是：当容器被 flex 或 grid 布局约束时，aspect-ratio 可能被忽略或表现异常；而 padding-top 方案在任何布局上下文中都稳定可靠。
真正复杂的地方不在写法，而在响应式断点切换比例时——比如移动端切 4:3、桌面端保持 16:9，这时需要媒体查询配合多套 padding-top 值，且要同步更新 object-fit 行为，不然会出现黑边突然出现或消失的闪烁。
