HTML5 video 默认不响应式，需用 max-width: 100% + height: auto 防溢出变形；推荐 aspect-ratio 维持比例，配合 object-fit；iOS 全屏需 webkit-playsinline + playsinline 及 viewport 设置。
video 标签默认不响应式，必须手动加 CSS 控制
HTML5 的 <video> 元素本身没有内置响应式行为，即使设了 width="100%"，在移动端或缩放时仍可能溢出容器、拉伸变形，或无法随父容器调整高度。关键不是“能不能”，而是“怎么写才真正适配”。
用 max-width + height: auto 防止横向溢出和拉伸
最基础也最容易被忽略的一点：仅设 width: 100% 不够，必须配合 max-width: 100% 和 height: auto，否则在小屏下视频会强行撑宽、裁剪黑边，甚至触发横向滚动条。
video {
width: 100%;
max-width: 100%;
height: auto;
}-
width: 100%让视频宽度跟随父容器 -
max-width: 100%是保险——防止父容器本身超视口（比如嵌套在宽卡片里）时视频越界 -
height: auto保持原始宽高比，避免压扁或拉长
用 aspect-ratio 维持固有比例（现代浏览器首选）
如果知道视频原始比例（如 16:9），用 aspect-ratio 比 JS 计算或 padding-top 技巧更可靠、更语义化。它让容器自动按比例伸缩，<video> 只需填满即可。
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
background-color: #000;
}
<p>.video-container video {
width: 100%;
height: 100%;
object-fit: cover; /<em> 或 contain，按需选 </em>/
}-
aspect-ratio在 Chrome 88+、Firefox 89+、Safari 15.4+ 支持良好；旧版 Safari 需降级 fallback -
object-fit: cover保证画面填满且不畸变（可能裁剪边缘），contain则完整显示但留黑边 - 不要给
<video>设固定height，否则会破坏aspect-ratio
移动端全屏播放与 viewport 设置强相关
iOS Safari 下，<video> 要支持点击全屏，必须满足两个硬性条件：一是添加 webkit-playsinline 属性，二是确保页面 <meta name="viewport"> 启用了缩放控制。缺一不可。
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <video controls webkit-playsinline playsinline> <source src="demo.mp4" type="video/mp4"> </video>
-
webkit-playsinline和playsinline缺一不可：前者兼容旧 iOS，后者是标准属性 -
user-scalable=no并非必须，但若缺失，某些 iOS 版本下双击可能触发缩放而非全屏 - 部分安卓 WebView 对
playsinline支持不稳定，可加 JS 监听webkitbeginfullscreen做兜底
真正的难点不在写几行 CSS，而在于不同设备对 video 的渲染策略差异太大——iOS 强制内联播放逻辑、Android 各厂商定制 Webview、Safari 对 aspect-ratio 的渐进支持……这些细节不验证到真机，光看桌面预览很容易误判效果。
