应使用外层容器设置宽高比（如padding-top:56.25%或aspect-ratio:16/9），video设width:100%;height:100%;object-fit:cover;并避免直接对video设height:auto导致布局跳动。
video元素直接设width:100%会撑开父容器高度
常见错误是只给video加width: 100%和height: auto，但页面加载时视频还没解析出宽高比，浏览器按默认尺寸（如300×150）渲染，导致布局跳动、父容器被撑高、滚动条意外出现。
真正可控的做法是：用外层容器锁定高宽比，再让video在其中自适应填充。
- 外层容器用
padding-top百分比撑高（例如16:9 →padding-top: 56.25%） -
video设为position: absolute，覆盖整个容器区域 - 必须加
top: 0; left: 0; width: 100%; height: 100%，否则可能留白或错位 - 避免用
aspect-ratio直接作用于video标签——它对替换元素（如video、img）无效
object-fit控制视频内容如何填满容器
即使容器比例固定了，视频画面本身宽高比仍可能不匹配（比如上传的是竖屏9:16的MP4），这时靠object-fit决定裁剪还是留黑边。
-
object-fit: cover：等比缩放并裁切，填满整个容器，可能丢失边缘内容 -
object-fit: contain：等比缩放并完整显示，上下/左右可能出现黑边 -
object-fit: fill：强制拉伸，一定变形，慎用 - 搭配
object-position: center可确保焦点区域居中，尤其在cover模式下有用
移动端自动全屏与播放控制的兼容性陷阱
在iOS Safari和部分Android WebView中，video默认无法自动播放、不能静音播放、点击后也不一定触发全屏——这些不是CSS能解决的，但CSS布局必须预留适配空间。
- 务必加
playsinline属性，否则iOS会强制跳转原生全屏播放器 - 不要依赖
height: 100vh做容器高度，Safari地址栏收起/展开时vh会变，造成闪烁或滚动条 - 控制按钮（play/pause）建议用绝对定位+透明背景，避免被系统UI遮挡
- 如果嵌入
iframe（如YouTube），需额外加allow="accelerometer; gyroscope; picture-in-picture"才能启用画中画
用aspect-ratio替代padding-top更简洁，但注意兼容范围
现代项目可直接用aspect-ratio，代码少一半，语义清晰，且不依赖绝对定位。
- 写法：
.video-container { aspect-ratio: 16 / 9; width: 100%; }+video { width: 100%; height: 100%; object-fit: cover; } - 兼容性：Chrome 88+、Firefox 89+、Safari 15.4+ 支持；IE和旧版安卓WebView不支持
- 若需兼容老系统，仍得回退到
padding-top方案，且必须配合position: relative和内部absolute定位 -
aspect-ratio不能写在video自身上，必须作用于其父容器
video.videoWidth和video.videoHeight为0，JS读取宽高比不可靠。所以基于内容动态计算比例的方案，在首帧渲染阶段大概率失败——老老实实用CSS声明比例，比任何运行时判断都稳。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
