直接设固定 height 会导致视频比例错乱，因缩放时高度不随宽度等比变化；应使用 padding-top 百分比（相对于父宽）配合绝对定位模拟高度，如 16:9 用 56.25%，并确保父容器 position: relative、height: 0。
为什么直接设 width/height 会导致视频比例错乱
在响应式页面里， 或 （比如 YouTube 嵌入）如果只写 width: 100% 和固定 height，缩放时高度不会随宽度等比变化，结果就是拉伸或压扁。浏览器对 height: auto 在嵌入内容上支持不稳定，尤其 iframe 常忽略父容器 aspect ratio。
padding-top 百分比的原理和正确用法
CSS 中 padding-top（以及 padding-bottom）的百分比值，是相对于**父元素宽度**计算的，不是高度——这个特性可以被用来“撑开”容器高度，从而锁定宽高比。关键在于：把视频容器设为相对定位，视频元素绝对定位填满，再用 padding-top 模拟高度。
- 父容器需设
position: relative - 内部
或设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 父容器的
padding-top值 =(height / width) × 100%，例如 16:9 →56.25%，4:3 →75% - 必须清空父容器默认 height，否则 padding 不起作用；通常设
height: 0
示例（16:9）：
.video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%; /* 9 / 16 = 0.5625 */
}
.video-wrapper iframe,
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Bootstrap 5 中如何复用或绕过 .ratio 类
Bootstrap 5 内置了 .ratio 工具类，但默认只支持预设比例（如 .ratio-16x9），且要求子元素是单个块级元素。如果你用的是 ，它默认是 inline-level，会出问题。
- 确保子元素加
class="w-100 h-100"或显式设display: block - 自定义比例需额外写 CSS，因为 Bootstrap 5 不提供
.ratio-4x3以外的 class（如 21:9 需手动加） - 若混用
.embed-responsive（Bootstrap 4 的旧类），注意它已被移除，强行用会失效 - 遇到
max-width限制导致比例压缩？检查外层是否套了.container或.col，它们有默认 max-width
常见失效场景和调试要点
最常遇到的是“有 padding 但视频没显示”或“比例还是不对”，基本都出在盒模型或定位链上。
- 父容器没设
position: relative→ 子元素absolute会相对于 body 定位，飘走 - 视频元素缺少
height: 100%→ 只占内容高度（可能为 0） - 用了
object-fit: cover但容器没设overflow: hidden→ 视频溢出可见 - 在 Flex/Grid 容器里嵌套该结构？确保父 Flex item 没设
align-items: stretch干扰高度计算 - Chrome DevTools 里检查 computed padding-top 是否生效：如果显示
0px，说明父宽度为 0（比如父是 display: inline）
复杂点在于：移动端 viewport 缩放、iframe 的跨域策略、以及某些 CMS（如 WordPress）自动包裹 标签破坏结构——这些都不会报错，但会让 padding 技术静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
