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 防意外。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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 防止绝对定位元素被居中截断。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！