video标签需容器设aspect-ratio（如16/9）并配合@supports降级，ios需autoplay+muted+playsinline+webkit-playsinline才能内联播放，object-fit决定裁切或留黑边。
video 标签本身不响应式，只设 width: 100% 必然塌高、变形、controls 被裁或点不动——这不是 CSS 写错了，是漏了宽高比约束、容器行为、播放策略三者协同。
为什么 width: 100% + height: auto 还会出问题
因为 video 是替换元素，浏览器按原始分辨率计算固有尺寸。父容器若没明确宽度（比如 div 没设 width 或塌陷），width: 100% 就无意义；height: auto 只在视频比例与容器一致时“看起来正常”，横屏视频放竖屏容器里必然黑边或裁切；iOS Safari 下，未设 playsinline 和 webkit-playsinline，点击 controls 直接跳全屏，不是 bug，是强制策略。
现代方案：用 aspect-ratio 控制容器，不是 video 本身
aspect-ratio: 16 / 9 必须写在包裹容器上，不能直接写在 video 标签上——否则老 Safari（≤15.3）会忽略，导致高度为 0，整个视频消失。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- HTML 结构：
<div class="video-container"><video></video></div> - CSS：
.video-container { width: 100%; aspect-ratio: 16 / 9; } -
video本身设：width: 100%; height: 100%; object-fit: cover;（铺满裁边）或contain（完整显示留黑边） - 必须配
@supports (aspect-ratio: 1/1) { }做降级，旧浏览器进 fallback 规则
兼容老 Safari 的 padding-bottom 方案怎么写才不翻车
老 Safari（iOS 15.2 及更早）不支持 aspect-ratio，得用 padding-bottom + position: absolute 模拟比例。但直接抄 “padding-top: 56.25%” 容易错——它只适用于 16:9，且必须配合 height: 0 和绝对定位，漏一个就失效。
- 容器设：
position: relative; width: 100%; height: 0; padding-bottom: 56.25%;（16:9）或75%（4:3） -
video设：position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 别给
video加margin或border，它们会破坏填满效果 - 如果用了
object-fit: contain，确保poster图像也适配该比例，否则首帧黑边位置错乱
移动端自动播放和内联播放必须同时满足的硬性条件
iOS Safari 对自动播放拦截极严，autoplay + muted 只是入场券，缺了播放策略属性，play() 会抛 DOMException: play() failed because the user didn't interact with the document first.，视频卡在首帧，看起来像加载失败。
- HTML 属性必须同时包含：
autoplay muted playsinline webkit-playsinline -
playsinline防止 iOS 自动全屏跳转，webkit-playsinline是它的 Safari 旧版前缀，二者缺一不可 -
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在且合理，否则某些 iOS 版本下双击可能触发缩放而非全屏
aspect-ratio 的降级必须用 @supports 包裹，而不是靠 class 切换；object-fit 的取值直接影响关键内容是否被裁，cover 和 contain 不是风格偏好，是业务逻辑选择；webkit-playsinline 在 Safari 15.4+ 已非必需，但删掉它会让 iOS 15.2 及更早用户直接失去内联播放能力。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
