用padding-top控制视频宽高比是利用块级元素padding百分比基于宽度计算的特性，通过设置padding-top=(高度÷宽度)×100%（如16:9为56.25%）创建固定比例空白区域，再将video绝对定位其中并配合object-fit:cover和overflow:hidden，实现不变形、不拉伸、不溢出的响应式效果。
为什么用padding-top做视频宽高比控制
CSS里直接写width: 100%; height: auto对视频不管用——元素默认不继承父容器的宽高比例，缩放后容易拉伸或留黑边。用padding-top是利用「块级元素padding百分比基于宽度计算」这个特性，人为撑出固定比例的空白区域，再把视频绝对定位进去，确保它始终填满且不变形。
- 这个技巧本质是“占位+覆盖”，不是靠视频自身缩放逻辑
- 必须配合
position: relative父容器和position: absolute子视频 -
padding-top值 = (高度 ÷ 宽度) × 100%，比如16:9就是56.25%，4:3是75% - 不依赖JavaScript，纯CSS，兼容所有现代浏览器（IE9+）
怎么写一个可复用的响应式视频容器
核心是把比例逻辑抽出来，避免每次算数字。用CSS自定义属性最稳妥：
.aspect-ratio {
position: relative;
width: 100%;
padding-top: 56.25%; /* 默认16:9 */
}
<p>.aspect-ratio > video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /<em> 防止变形，裁剪多余部分 </em>/
}</p><p>.aspect-ratio[data-ratio="4:3"] {
padding-top: 75%;
}</p><p>.aspect-ratio[data-ratio="1:1"] {
padding-top: 100%;
}</p>
-
object-fit: cover比contain更常用，能填满又不拉伸，但会裁边 - 如果视频源本身带黑边（比如letterbox格式），
cover可能把黑边也裁掉，这时改用contain并加background-color补底色 -
data-ratio属性方便HTML里切换：
移动端下video全屏按钮失效或错位
iOS Safari和部分安卓浏览器在position: absolute容器里，原生全屏按钮（尤其是右下角那个）会丢失或点不动。这不是bug，是浏览器对绝对定位内联媒体控件的限制。
- 必须给
加webkit-playsinline和playsinline属性，否则iOS强制全屏 - 不要给
设z-index负值，否则全屏按钮被盖住 - 如果用了
object-fit: cover，确保父容器overflow: hidden，否则裁切部分可能溢出影响点击热区 - 真实场景中，有些安卓WebView（比如微信内置）仍会忽略
playsinline，得靠JS监听webkitbeginfullscreen事件做降级处理
用aspect-ratio CSS属性替代padding方案？
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持原生aspect-ratio属性，写法简单：aspect-ratio: 16 / 9。但它不能完全取代padding方案：
-
aspect-ratio只作用于替换元素（如img、video）或display: block元素，对inline无效 - 它控制的是元素自身的宽高比，不提供“占位”能力——如果视频还没加载完，容器会塌陷，导致布局跳动
-
padding-top方案天然有高度占位，首屏渲染更稳定 - 老版本浏览器无fallback，而padding方案本身是渐进增强的
所以现在稳妥做法是：用padding-top打底，再叠一层aspect-ratio作为增强。浏览器支持就用原生，不支持就回退到padding逻辑。
实际项目里，最常被忽略的是object-fit和overflow的配合。光设了cover却不封住父容器溢出，裁掉的部分可能干扰下方内容，尤其在滚动页面里。这点在真机调试时才容易暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
