响应式视频需父容器设 aspect-ratio 或 padding-bottom 实现宽高比约束，video/iframe 自身设宽高100%+object-fit；iOS内联播放必须同时满足 autoplay、muted、playsinline、webkit-playsinline 四属性。
直接用 <video></video> 标签无法实现真正响应式——只设 width: 100% 必然塌高、controls 被裁、iOS 点击跳全屏，这不是 CSS 写错了，是漏了宽高比约束、容器行为、播放策略三者协同。
video 标签必须套容器，不能直接设 aspect-ratio
aspect-ratio: 16 / 9 必须写在包裹 <video></video> 的 <div> 上，不能写在 <code><video></video> 自身。老 Safari（≤15.3）会忽略直接作用于 <video></video> 的 aspect-ratio，导致高度为 0、整个视频消失。
- 正确结构：
<div class="video-container"><video></video></div> - CSS：
.video-container { width: 100%; aspect-ratio: 16 / 9; } -
<video></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></video>设：position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 别给
<video></video>加margin或border，它们会破坏填满效果 - 如果用了
object-fit: contain，确保poster图像也适配该比例，否则首帧黑边位置错乱
iFrame 嵌入 YouTube 视频的响应式写法
YouTube 官方 iframe 不支持 aspect-ratio，也不能靠 width/height 属性响应式。固定值会溢出或留白，直接拉伸会模糊变形。
立即学习“前端免费学习笔记（深入）”；
- 必须用容器 +
padding-bottom: 56.25%（16:9）维持比例 - 结构：
<div class="video-wrapper"><iframe src="https://www.youtube-nocookie.com/embed/xxx"></iframe></div> - CSS：
.video-wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }+.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } - src 推荐用
youtube-nocookie.com（隐私增强模式），避免 CSP 拦截和广告拦截器误杀 - 不要删
allow="autoplay"—— 即使不用自动播放，Safari 也可能因缺失该权限拒绝静音播放
iOS 内联播放必须同时满足的硬性条件
iOS Safari 对自动播放拦截极严。autoplay + muted 只是入场券，缺了播放策略属性，play() 会抛 DOMException: play() failed because the user didn't interact with the document first.，视频卡在首帧，看起来像加载失败。
- HTML 属性必须同时包含：
autoplay、muted、playsinline、webkit-playsinline - 四项缺一不可；只写三个，iOS 就强制跳全屏
- 若用 JS 调
play()，必须在用户手势（如 click/tap）后触发，不能 onload 就调 -
poster图像尺寸建议与视频原始比例一致，否则首帧渲染时黑边错位明显
最易被忽略的是：宽高比控制不在 <video></video> 或 <iframe></iframe> 本身，而在它的父容器；而 iOS 播放策略不是“可选优化”，是四个属性组成的原子条件——少一个，就不是“不自动播”，而是“根本播不了”。
