video塌高变形或controls被裁的根本原因是缺失宽高比约束、容器行为与播放策略协同；须用aspect-ratio设于容器、禁用内联宽高、配齐playsinline等属性并确保viewport声明正确。
只设 width: 100% 的 <video></video> 必然塌高、变形或 controls 被裁——这不是 CSS 写错了，是漏了宽高比约束、容器行为、播放策略三者协同。
为什么 width: 100% + height: auto 还会出问题
因为 <video></video> 是替换元素，浏览器按原始分辨率计算固有尺寸。父容器若没明确宽度（比如 <div> 没设 <code>width 或内容塌陷），width: 100% 就无参照；height: auto 只在视频比例与容器一致时“看起来正常”，横屏视频放竖屏容器里必然黑边或裁切；iOS Safari 下，未设 playsinline 和 webkit-playsinline，点击 controls 直接跳全屏，不是 bug，是强制策略。
必须同时满足：
- 父容器有明确宽度（如
width: 100%或max-width: 800px） -
<video></video>上不能有内联width或height属性（会覆盖 CSS） - 移除
loop属性，否则ended事件永不触发，预加载器无法退出 -
viewport必须声明：<meta name="viewport" content="width=device-width, initial-scale=1.0">，且不能含user-scalable=no
现代方案：用 aspect-ratio 控制容器，不是 <video></video> 本身
aspect-ratio: 16 / 9 必须写在包裹容器上，不能直接写在 <video></video> 标签上——否则老 Safari（≤15.3）会忽略，导致高度为 0，整个视频消失。
标准结构：
<div class="video-container"> <video autoplay muted playsinline webkit-playsinline><source src="vid.mp4" type="video/mp4"></source></video> </div>
CSS：
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover; /* 或 contain */
}
注意：
- 别给
video加margin或border，它们会破坏填满效果 - 若需兼容 Safari ≤15.3，用
@supports (aspect-ratio: 1/1)包裹现代规则，并提供padding-bottom降级 -
object-fit: cover是全屏预加载的黄金组合；contain适合需要完整显示字幕或 UI 元素的场景
iOS 全屏和内联播放失败的硬性条件
iOS Safari 对自动播放和全屏拦截极严。autoplay + muted 只是入场券，缺了播放策略属性，play() 会抛 DOMException: play() failed because the user didn't interact with the document first.，视频卡在首帧。
HTML 属性必须同时包含：
autoplaymutedplaysinlinewebkit-playsinline
JavaScript 触发全屏时：
- 不能只调
video.requestFullscreen()，得等play()的 Promise resolve 后再调 - 不要用
webkitEnterFullscreen()等私有方法，iOS 15+ 已统一支持标准 API - 若视频嵌在
modal或fixed定位区域里，全屏退出后容易定位错乱，建议全屏前先临时appendTo(document.body)
移动端预加载视频自适应的关键参数
预加载视频常见问题：拉伸变形、播放完主内容不显示、极窄屏下高度溢出。
正确 CSS 组合是：
#preloader-container video {
width: 100%;
height: auto;
max-height: 100vh;
object-fit: cover;
}
关键点：
-
height: auto是响应式基础，它让高度随宽度动态计算，避免硬编码错位 -
max-height: 100vh防止在超窄屏（如折叠屏竖向）下视频高度撑爆视口 - 必须移除
loop，否则ended事件永不触发；若需循环预览效果，改用timeupdate+currentTime判断临界点 -
poster图像尺寸需匹配视频比例，最小建议 720p，否则首帧黑边位置错乱
最易被忽略的是：所有这些样式都依赖 viewport 正确声明，且不能被后续 JS 动态修改 —— 一旦 viewport 被覆盖或禁用缩放，iOS 全屏 API 直接失效，连 fallback 都没机会执行。
