根本原因是HTML视频默认按原始宽高比缩放且object-fit缺失或设错；必须设object-fit:cover，配合width:100vw和height:100vh，并避免max-width/max-height干扰全屏。
为什么 <video> 全屏后总被裁切或留黑边
根本原因不是 WebStorm 的问题，而是 HTML 视频默认按原始宽高比缩放，object-fit 缺失或设错。WebStorm 只是编辑器，真正起作用的是你写的 CSS 和 video 属性。
常见现象：视频撑满视口但左右/上下出现黑边；或强行拉伸变形；或全屏后内容被遮挡。
- 必须加
object-fit: cover，否则浏览器按 intrinsic size 拉伸，不保证铺满 -
width: 100vw+height: 100vh是基础，但仅靠它不够 - 避免给
<video>设max-width或max-height，会干扰全屏行为 - 如果用
poster，记得它不会自动适配object-fit，需单独写样式
WebStorm 中快速插入带全屏控制的 video 标签
不用手敲冗长属性——WebStorm 支持 Emmet 和 Live Templates。输入 video:full（需提前配置）或直接用 Emmet：video#bg-video[autoplay muted loop poster="images/poster.jpg"]+source[src="videos/intro.mp4" type="video/mp4"]，回车即生成结构。
关键点：
-
autoplay和muted必须同时存在，否则 Chrome/Firefox 会静音拦截 -
loop要加，不然视频播完就黑屏 - ID 命名为
bg-video方便后续 JS 控制或 CSS 定位 - 不要用
controls—— 全屏背景视频不需要用户操作控件
CSS 全屏视频层叠顺序和 z-index 坑
视频常被导航栏、文字盖住，不是 z-index 数值小，而是层叠上下文（stacking context）没理清。
典型错误写法：.header { z-index: 100; } + #bg-video { z-index: 1; } —— 两者不在同一层叠上下文，z-index 无效。
- 给
#bg-video父容器（如<body>或一个全屏<div class="video-container">）设position: relative，再设z-index: -1 - 视频自身设
position: absolute; top: 0; left: 0; width: 100%; height: 100% - 内容区（如
.content）必须在同一个父容器内，且position: relative+ 更高z-index - 避免对
body直接设overflow: hidden，可能影响滚动锚点或 JS 检测
移动端 Safari 视频不自动播放或无法全屏
iOS Safari 对 autoplay 极其严格：必须满足「无用户手势、静音、playsinline」三条件，否则只显示 poster。
实操要点：
- 务必加
playsinline属性，否则 iOS 会跳出原生播放器，破坏全屏效果 - 视频编码推荐 H.264 + AAC，MP4 容器；避免 WebM 在 iOS 上不兼容
- 用
preload="auto"提前加载，但别依赖它解决首帧延迟 - 测试时禁用 WebStorm 的本地预览服务器（
http://localhost:63342），改用live-server或部署到支持 HTTPS 的环境——Safari 要求 autoplay 在安全上下文中
最易忽略的一点：视频文件本身分辨率不能过高（建议 ≤ 1920×1080），否则 iOS 会拒绝 autoplay 并静音，连 poster 都不显示。
