应将 aspect-ratio 设在容器上并配合 object-fit，而非直接设 video 宽高；老 Safari 需用 padding-bottom 降级；autoplay 必须同时满足 muted、playsinline、webkit-playsinline 及 viewport 允许缩放。
直接给 写 width: 100% 不行，它会塌高、裁控件、移动端点不动——核心问题不在宽度，而在宽高比失控 + 播放策略被拦截。
为什么 width: 100% + height: auto 还是错的
因为 当需要支持 iOS 15.2 及更早版本 Safari 时，得回退到传统技巧。注意： 如果视频卡在首帧、控制条不出现、控制台报 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur 缺一个， 是替换元素，浏览器按原始分辨率计算固有尺寸。height: auto 只在容器比例匹配时“看起来正常”，一旦横屏视频放进竖屏容器，必然黑边或裁切；更糟的是，如果父容器没显式宽高（比如空 width: 100% 根本无参照，视频可能消失或高度算成 0。
max-width: 100% 或 width: 100%）height: auto 对移动端原生 controls 不友好：小屏下按钮缩成一条线，甚至失焦无法点击playsinline 时，点 controls 直接跳全屏，不是 bug，是强制策略现代方案：用
aspect-ratio 控制容器，而非 video 自身aspect-ratio: 16 / 9 必须写在包裹 的容器上（如 标签上——老 Safari（≤15.3）会忽略该声明，导致 高度为 0，整个视频不可见。
.video-container { width: 100%; aspect-ratio: 16 / 9; }
本身设：width: 100%; height: 100%; object-fit: cover;（推荐，裁边不拉伸）或 contain（完整显示但留黑边）@supports (aspect-ratio: 1/1) { } 做降级，旧浏览器进 fallback 规则兼容老浏览器的 padding-bottom 方案
padding-top: 56.25% 不是万能公式，它只适用于 16:9，且必须配合 height: 0 和绝对定位，漏一个就失效。
position: relative; width: 100%; height: 0; padding-bottom: 56.25%;
设：position: absolute; top: 0; left: 0; width: 100%; height: 100%;
加 margin 或 border，它们会破坏填满效果object-fit: contain，确保 poster 图像也适配该比例，否则首帧黑边位置错乱autoplay 失效的硬性条件检查
DOMException: play() failed because the user didn't interact with the document first.，基本就是以下任一缺失：
autoplay 属性必须存在muted 必须存在（静音是强制前提）playsinline 必须存在（防止 iOS 全屏跳转）webkit-playsinline 必须存在（Safari 旧版本兼容） 中不能含 user-scalable=no，它会干扰内联播放autoplay 就白写。这不是 bug，是平台策略，且 iOS Safari 在横屏进入原生全屏时，会把 提升到顶层并脱离 DOM 流——此时你写的任何容器 CSS 都完全失效，唯一可控的只有退出全屏后的样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
