padding-top百分比是兼容性最好、最稳定的响应式视频嵌入方案；因其百分比基于父宽计算，可“借宽算高”，配合position:relative、height:0和绝对定位子元素实现等比缩放，缺一不可。
直接用 padding-top 百分比撑开容器高度，是目前兼容性最好、最稳定的响应式视频嵌入方案；aspect-ratio 虽简洁，但若需支持 iOS 14 以下、Android WebView 或微信内置浏览器（尤其旧版），仍得退回此法。
为什么必须用 padding-top（或 padding-bottom）而不是 height
因为 height: 56.25% 在非绝对定位的常规流中无效——浏览器会把它当 0 处理；而 padding-top: 56.25% 的百分比是相对于父容器宽度计算的，恰好能“借宽算高”，实现等比缩放。漏掉这点，容器高度就塌陷或错乱。
-
padding-top和padding-bottom都可用，但必须配height: 0，否则 padding 和 height 叠加导致高度翻倍 - 别把
padding-top写在<video></video>或<iframe></iframe>自身上，它只对包裹容器生效 - 如果父容器本身是 flex 子项，记得加
min-width: 0，否则width: 100%可能不收缩
16:9、4:3 等比例对应的具体数值怎么算
别硬记，现场算：用「目标高度 ÷ 目标宽度 × 100」，结果就是 padding-top 值。
-
16:9→9 / 16 * 100 = 56.25% -
4:3→3 / 4 * 100 = 75% -
21:9（超宽屏）→9 / 21 * 100 ≈ 42.857% -
1:1（正方形）→100%
填错 0.1%，缩放时就能看出黑边不均或画面挤压——尤其是全屏切换时。
关键样式结构不能少哪一环
四要素缺一不可：包裹容器 + position: relative + height: 0 + 子元素 position: absolute 填满。
- 容器必须是独立
<div>，不能直接给 <code><video></video>加样式 - 容器样式示例：
.video-container { position: relative; width: 100%; height: 0; padding-top: 56.25%; } - 子元素（
<iframe></iframe>或<video></video>）必须写：position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 若用
<video></video>，记得加display: block消除底部空白 - Flex 子容器要加
min-width: 0和max-width: 100% - Grid 中若格子没设
width或grid-template-columns，padding-top仍按轨道宽算，但可能被截断 -
max-width: 100%必须和width: 100%共存，否则在卡片类布局里视频可能撑破父容器
嵌套在 Flex/Grid 中容易失效的几个点
不是代码写错了，而是布局上下文变了——Flex 容器默认 min-width: auto，Grid 格子可能按 fit-content 计算轨道宽度，都会干扰 padding-top 的基准。
真正难的不是写对一次，而是所有嵌套层级都保持这个计算链不中断——比如容器里再套一层 <div> 却忘了设 <code>position: relative，整个比例就崩了。
