给 video 元素设置 max-width: 100%; height: auto 可解决默认撑破布局问题，需配合移除内联宽高属性、响应式时补充 object-fit 或 aspect-ratio，并注意全屏状态 CSS 失效及父容器溢出处理。
视频元素默认会按原始尺寸渲染，超出容器时可能撑破布局。直接给 设置 max-width: 100% 就能解决大部分场景，但要注意父容器、响应式行为和内联样式干扰。
给 video 元素直接加 max-width: 100%
这是最常用也最有效的做法，让视频宽度不超过其父容器的宽度，同时保持原始宽高比：
video {
max-width: 100%;
height: auto;
}关键点：
-
height: auto必须配合使用，否则视频会被拉伸或压扁 - 若父容器没有设定宽度（比如
或未设宽的），max-width: 100%实际等效于屏幕宽度- 该规则对
poster图、控制栏、全屏状态均有效避免 inline style 覆盖 max-width
很多前端框架或 CMS 会自动给
插入width和height属性（如），这些属性会生成内联样式，优先级高于外部 CSS，导致max-width失效。立即学习“前端免费学习笔记（深入）”；
解决办法：
- 移除 HTML 中的
width和height属性（推荐） - 或用 CSS 强制覆盖：
video[width] { width: auto !important; } - 或用 JS 清除：
document.querySelectorAll('video').forEach(v => { v.removeAttribute('width'); v.removeAttribute('height'); });
响应式场景下补充 object-fit 控制裁剪方式
当容器宽高比与视频不一致（比如竖屏手机看横屏视频），仅靠
max-width无法控制内容显示区域。此时需搭配object-fit：video { max-width: 100%; height: 300px; /* 固定高度或用 aspect-ratio */ object-fit: cover; /* 填满且裁剪，保持比例 */ /* 或 object-fit: contain; —— 完整显示，留黑边 */ }注意：
-
object-fit在 IE 中不支持，如需兼容可加 polyfill 或降级为background-image方案 - 若用
aspect-ratio替代固定高度（如aspect-ratio: 16/9），记得检查浏览器支持度 -
object-fit不影响视频实际播放尺寸，只影响渲染视觉效果
移动端全屏时 max-width 失效怎么办
在 iOS Safari 或 Android Chrome 全屏播放时，
会脱离文档流并渲染为原生控件，此时页面 CSS 不再生效。你写的max-width对全屏状态完全无效。这意味着：
- 全屏下的尺寸由系统决定，无法用 CSS 限制
- 如果目标是“禁止用户看到过大的视频画面”，只能从源头控制：提供合适分辨率的视频源（如用
media或type切换不同清晰度文件） - 某些 WebView（如 Cordova、Capacitor）可通过插件监听全屏事件并动态调整容器，但标准浏览器无解
真正容易被忽略的是：max-width 只管宽度，不管高度溢出；而移动端视频常因 poster 图或 controls 高度引发垂直方向撑开。建议始终用
overflow: hidden包裹 video 的父容器，并测试各种设备下的实际渲染结果。 - 该规则对
