padding-bottom 百分比应按“高÷宽”计算，如16:9为56.25%；容器需设height:0和position:relative；video须absolute定位并铺满；box-sizing:border-box防干扰；object-fit:cover有兼容性限制。
padding-bottom 百分比值怎么算才对
填错一点，视频就 visibly 挤压或上下留黑边。关键不是凭经验记 56.25%，而是按「高 ÷ 宽」算：16:9 就是 9 / 16 = 0.5625 → padding-bottom: 56.25%；4:3 是 3 / 4 = 0.75 → padding-bottom: 75%；竖屏 9:16 则是 16 / 9 ≈ 1.7778 → padding-bottom: 177.78%。别把分子分母颠倒，否则容器高度会远超预期。
包裹容器必须设 height: 0 和 position: relative
常见错误是只写 padding-bottom 却漏掉这两条：height: 0 确保 padding 成为唯一高度来源；position: relative 是为了让内部 video 能用 position: absolute 正确锚定。如果父容器有 border 或 padding，会干扰 width 基准（因为百分比 padding 基于 content box 宽度），建议加 box-sizing: border-box 防意外。
video 元素必须绝对定位且铺满
单纯给 video 设 width: 100% 和 height: auto 不行——它不参与容器高度计算，会塌陷或只显示左上角一小块。必须：position: absolute + top: 0 + left: 0 + width: 100% + height: 100%。同时删掉 HTML 中的 width 和 height 属性，否则会覆盖 CSS 控制。
object-fit 和兼容性要分场景处理
object-fit: cover 能裁切填满，但 iOS Safari 在 15.4 之前不支持；旧版本得降级为 width: 100%; height: auto; 加 JS 监听尺寸变化。若视频源本身非标准比例（比如手机竖拍），cover 必然裁边，换 contain 可全显但留黑边——这不是 bug，是等比缩放的必然结果。
立即学习“前端免费学习笔记（深入）”；
实际项目里最易被忽略的，是包裹容器没清空默认 margin/padding、video 标签残留内联宽高属性、以及在 Flex 容器中忘了设 align-items: flex-start 防止绝对定位元素被居中截断。 
