隐藏视频却不中断播放的最小安全方案是使用 position: absolute + inset: -9999px 将视频移出视口，同时保留其在 Grid 中的网格项位置；避免 display: none 或 visibility: hidden 导致暂停播放。
Grid布局中隐藏视频元素的常见错误
直接用
或
隐藏
元素，会导致其暂停播放、释放解码器资源，甚至触发
事件——这在需要后台持续加载或音视频同步的场景下不可接受。
：彻底移出渲染流，
会失败，且多数
浏览器
拒绝自动播放策略
：仍占布局空间，但画面不可见，音频可能继续播放（行为不一致，Chrome 和 Safari 处理不同）
正确思路是「视觉隐藏但保持激活状态」：用
+
，同时确保它仍在 Grid 网格项中参与布局
用 grid-template-areas 精确控制多个视频位置
最适合语义化地分配多个
元素到固定区域，比如画中画、主屏+副屏、监控九宫格等场景。
每个
的容器需设置
名称，与
中的字符串一一对应
行内换行用引号包裹，空格分隔列，换行符分隔行；缺失位置用
占位
注意：
必须写在子元素上（即 video 的父容器），不能直接写在
上（部分浏览器不支持）
动态切换视频显示位置时避免重排和卡顿
用 JS 切换
值本身开销极小，但若频繁修改（如拖拽换位、焦点高亮），要注意：
不要每次切换都重新设置整个
，只改子元素的
避免在循环中连续读取
或
，否则强制同步布局
若需淡入/淡出效果，统一用
+
，不要混用
（可能触发 video texture 重载）
移动端注意：iOS Safari 对
动态变更响应较慢，建议加
提前提示合成器
隐藏视频却不中断播放的最小安全方案
核心是让元素「不可见、不可点、不占视觉空间，但保持 layout flow 和媒体状态」：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
使用
+
将视频移出视口（比
兼容性更好）
同时保留其在 Grid 中的网格项位置（即不删 DOM，也不设
）
若必须用
，请确保父容器未设置
，否则某些 Android WebView 会误判为离屏而卸载视频纹理
Grid 本身不干预媒体行为，真正容易被忽略的是：视频是否还在文档流里、是否还能响应
或
。只要没被
或从 DOM 移除，它就还在「活着」。
display: nonevisibility: hiddenpausedisplay: noneplay()visibility: hiddenopacity: 0pointer-events: nonegrid-template-areasgrid-areagrid-template-areas.grid-area
.container {
display: grid;
grid-template-areas:
"main main side"
"main main side"
"foot foot foot";
}
.video-main { grid-area: main; }
.video-side { grid-area: side; }
.video-foot { grid-area: foot; }
grid-areagrid-template-areasgrid-areaoffsetTopgetBoundingClientRect()opacitytransitiontransform: scale(0)grid-areawill-change: grid-areaposition: absoluteinset: -9999pxclip-pathdisplay: noneopacity: 0overflow: hidden
.video-hidden {
opacity: 0;
pointer-events: none;
/* 不要加 transform 或 filter，它们可能触发新层并中断硬件加速 */
}
loadeddatatimeupdatedisplay: none