视频响应式需禁用内联宽高，优先用aspect-ratio+object-fit实现，旧浏览器用height:0+padding-bottom，ios内联播放须同时设playsinline和webkit-playsinline且配合muted与正确viewport。
视频在响应式布局里不自动缩放是常态，不是 bug。浏览器对 <video></video> 的默认行为就是「固定尺寸」，哪怕你写了 width="100%"，它也只管宽、不管高，结果常是黑边、裁切、横向滚动条或 controls 被压扁。
video 标签必须禁用内联 width/height 属性
这是最容易被忽略的硬性前提。只要 <video></video> 标签上写了 width="640" 或 height="360"，CSS 里的 max-width: 100% 和 height: auto 就会被强制覆盖——尤其在 Safari 和旧版 Chrome 中表现明显。
- 删掉所有内联
width和height，哪怕只是占位用的width="1"也不行 - 如果需要提供固有比例参考（比如 iOS Safari 渲染 poster），改用
aspect-ratio或包裹容器控制，而不是靠 HTML 属性“骗”浏览器 - 检查构建工具（如 Webpack/Vite）是否在编译时自动注入了内联尺寸，这类行为需在 loader 配置中关闭
现代方案：用 aspect-ratio + width:100% + object-fit
Chrome 88+、Firefox 89+、Safari 15.4+ 都已稳定支持 aspect-ratio，它是目前最干净、语义最明确的方式。关键不是给 <video></video> 设比例，而是给它的父容器设。
- HTML 结构保持简洁：
<div class="video-wrapper"><video></video></div> - CSS 写法：
.video-wrapper { width: 100%; aspect-ratio: 16 / 9; }<br>.video-wrapper video { width: 100%; height: 100%; object-fit: cover; } -
object-fit: cover填满且不拉伸（可能裁边），contain完整显示但留黑边；别用fill，它会强行拉伸变形 - 不要给
video单独设height，否则直接破坏aspect-ratio的计算逻辑
兼容旧浏览器：padding-bottom 技巧必须配 height: 0
当项目需支持 Android 4.x、IE11 或 Safari ≤15.3 时，padding-bottom 仍是可靠 fallback。但它有个致命细节：父容器若没设 height: 0，padding-bottom 百分比就无效——因为它的计算基准是父容器宽度，而高度必须为零才能让 padding “撑开”空间。
- 正确写法：
.video-wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }<br>.video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } -
56.25%对应 16:9（9 ÷ 16），75%对应 4:3（3 ÷ 4），数值必须精确，不能四舍五入 - 别用
padding-top替代，部分安卓 WebView 对它的解析不稳定 - 这个结构下，
poster图片和<track></track>字幕能正常渲染，比纯 CSS 方案更健壮
移动端全屏与内联播放必须配齐两个属性
iOS Safari 对视频播放限制极严：缺任意一个，点击就跳全屏，无法内联播放。这不是样式问题，是平台级策略，CSS 再怎么调都没用。
-
<video playsinline webkit-playsinline></video>必须同时存在，缺一不可 -
autoplay必须搭配muted，否则静音未开时 Safari 直接拒绝播放 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">要在最前面，且不能带user-scalable=no或maximum-scale=1.0，否则内联播放会被禁用 - 测试时务必真机操作，模拟器常误报“已内联”，实际点开仍是全屏
真正难的不是写几行 CSS，而是判断什么时候该用 aspect-ratio、什么时候必须退到 padding-bottom、以及哪些属性组合在 iOS 上是“开关式”的——错一个，整个交互链就断。这些点不写进代码注释里，半年后自己都得重查文档。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
