video自适应核心解法是max-width: 100% + height: auto，需清除内联宽高属性、确保父容器有明确宽度、添加playsinline等ios必要属性，并注意flex/grid容器中的收缩限制。
video 元素默认不自适应宽度，直接写 width="100%" 或只加 width: 100% 很可能失效或拉伸变形——核心解法是 max-width: 100% + height: auto，且必须清除干扰项。
为什么 width: 100% 常常不管用
浏览器对 video 的渲染逻辑特殊：它有内置的“固有尺寸”，即使设了 width: 100%，若父容器没明确宽度、或存在内联 width/height 属性，就会回退到原始像素值撑破布局。
- 父容器未设宽（比如未重置
bodymargin 或没声明width），100%就失去参照 - HTML 中写了
<video width="640" height="360"></video>—— 这些属性会生成高优先级内联样式，覆盖外部 CSS - 移动端 Safari 默认禁用内联播放，
playsinline缺失时可能触发全屏 fallback，CSS 失效
必须写的 CSS 规则
最简有效组合只有两行，但缺一不可：
video {
max-width: 100%;
height: auto;
}
-
max-width: 100%是保险机制：防止父容器本身超视口（如嵌套在宽卡片里）时视频越界 -
height: auto强制按原始宽高比缩放；漏掉它，视频会被垂直拉伸或压扁 - 避免给
video设固定height，否则直接破坏比例 - 若父容器是
flex或grid子项，确认没被flex-shrink: 0锁死
兼容旧浏览器的 aspect-ratio 替代方案
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持 aspect-ratio，但老版本 Safari 需降级。推荐双写：
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: contain;
}
-
aspect-ratio定义容器固有比例，比 JS 计算或padding-bottom更可靠 -
object-fit: contain确保完整显示不裁剪（留黑边），cover则填满但可能切边缘 - 旧版 fallback 可用
padding-bottom: 56.25%+position: absolute，但需额外 wrapper
iOS 全屏和内联播放的硬性条件
在 iPhone 上点击播放按钮后想保持页面内播放（而非跳全屏），必须同时满足：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">—— 缺少它，iOS Safari 按 980px 渲染，100%计算错 -
<video playsinline webkit-playsinline></video>—— 两个属性缺一不可，前者兼容 iOS 10，后者是标准属性 - 移除 HTML 中的
width/height属性，或用video[width] { width: auto !important; }覆盖
真正容易被忽略的是上下文：所有“自适应”都依赖父容器是否撑开、是否被 overflow: hidden 裁剪、是否在 flex 容器里被隐式压缩——这些不解决，光调 video 样式没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
