不够，必须同时使用max-width: 100%和height: auto；前者防止溢出，后者保持原始宽高比缩放，单独max-width无法实现真正响应式。
直接用 max-width: 100% 就够了吗？
不够。单独写 max-width: 100% 只是设了个“不许比父容器宽”的上限，但视频默认不会自动缩放——它仍会按原始尺寸渲染，可能溢出或留白。真正起作用的是组合：max-width: 100% + height: auto。前者防溢出，后者强制按比例缩放高度。
video 元素加 height: auto 的必要性
如果不设 height: auto，浏览器对 video 的默认高度行为不稳定：有的按 intrinsic size（原始分辨率）渲染，有的按行内元素 baseline 对齐，导致上下留空或错位。加上 height: auto 后，高度会严格跟随宽度变化，维持原始宽高比。
- 错误写法：
video { max-width: 100%; }→ 高度固定，拉伸/裁剪风险高 - 正确写法：
video { max-width: 100%; height: auto; } - 若父容器有 padding 或 border，记得加
box-sizing: border-box避免计算偏差
为什么不用 width: 100%？
width: 100% 强制填满，但会破坏响应式弹性：当父容器本身被限制（比如 max-width: 800px），width: 100% 仍会撑满那个 800px，而小屏下可能过大会挤占其他内容；max-width: 100% 则允许它在更小的父容器中继续收缩，更安全。
-
width: 100%：必须占满，无退路 -
max-width: 100%：最多占满，小了就跟着小 - 移动端横屏时，
max-width: 100%能防止视频突然撑满整个 viewport 宽度，造成字幕或控件过小
遇到 flex 容器里失效怎么办？
当 video 放在 display: flex 的父容器中，即使写了 max-width: 100%，它也可能被 flex 项目默认的 flex: 1 或 min-width: auto 拉伸变形。这不是 CSS 错，而是 flex 布局优先级更高。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：给
video加flex: 0 1 auto（不放大、可缩小、基准为内容尺寸） - 更稳做法：在外层套一层
div.video-container，让容器负责 flex 占位，video只管自身响应式 - 别依赖
width: 100%在 flex 子项里“强行填满”，它和max-width冲突时，width通常赢，反而破坏自适应
max-width: 100% + height: auto 虽能保比例，但控件图标可能缩到无法点击——这时得配合 min-width 或媒体查询单独调 video 的 min-height。 
