video 必须通过外层容器的 aspect-ratio（或 padding-bottom 回退）控制宽高比，再配合 object-fit 和必要 HTML 属性（autoplay muted playsinline 等），才能在各设备正确显示且适配自动播放。
只设 width: 100% 或 max-width: 100% 的 video 标签，一定会在某些设备上变形、塌陷或 controls 被裁掉——这不是 CSS 写得不够狠，而是没控制宽高比这个核心前提。
为什么 video 加了 width: 100% 还会出问题
video 是替换元素，浏览器按其原始分辨率计算高度。仅拉宽不约束高，小屏下要么上下黑边错位，要么父容器高度塌成 0（尤其 flex/grid 容器里），iOS 上甚至 controls 按钮挤成一条线不可点。
- 父容器没设
width或max-width，video可能溢出布局 -
height: auto必须和width: 100%同时出现，否则比例失守 - 直接在
video标签上写aspect-ratio无效——它必须作用在**包裹容器**上
现代写法：用 aspect-ratio + object-fit 控制画面填充
主流浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已稳定支持 aspect-ratio，语义清晰、无需 hack。
- 外层容器设
aspect-ratio: 16 / 9（横屏）或9 / 16（竖屏），再加width: 100% -
video本身设width: 100%; height: 100%; object-fit: cover（铺满裁边）或contain（完整显示留黑边） - 必须加
@supports not (aspect-ratio: 16 / 9)回退规则，否则老 Safari（如 iOS 15.2）会渲染出高度为 0 的空白
兼容旧版 Safari 的 padding-bottom 方案
当目标用户含大量 iOS 15.3 及更早版本时，必须降级到传统技巧：用 padding-bottom 模拟比例，靠绝对定位填满。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 容器设
position: relative; width: 100%; height: 0; padding-bottom: 56.25%（16:9） -
video设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 别漏掉
border: none（对iframe尤其关键），否则旧 Android 可能出现 2px 白边
移动端自动播放与内联播放必须配齐的属性
iOS Safari 对自动播放拦截极严；不满足条件时 play() 会抛出 DOMException: play() failed because the user didn't interact with the document first.，视频卡在首帧。
- HTML 属性必须同时包含：
autoplay muted playsinline webkit-playsinline -
playsinline防止跳全屏，webkit-playsinline是它的 Safari 专属前缀，缺一不可 - 即使加了这些，iOS 仍要求首次播放由用户手势触发（如点击），不能靠
DOMContentLoaded自动调用play()
真正难的不是写出能跑的代码，而是判断该用 cover 还是 contain：前者可能切掉讲师手势，后者在窄屏上黑边过宽影响信息密度——这得看视频内容本身，而不是抄个模板就完事。
