全屏切换时控制面板错位或消失的根本原因是定位逻辑未适配双视口，应将控制栏置于 video 的 relative 容器内并用 absolute + bottom 定位，结合 fullscreenchange 动态切类、iOS 专用修复及响应式布局。
全屏切换时控制面板布局错位或消失，核心原因是容器定位、尺寸计算和 CSS 作用域在全屏状态下发生了变化。关键不在“重写样式”，而在于让控制面板的定位逻辑适配两种视口（普通页面 vs 全屏元素）。
确保控制面板始终相对 video 元素定位
不要用 position: absolute 相对于 body 或父容器定位控制栏，而应包裹在 video 的直接容器内，并设为 position: absolute + bottom: 0，同时给 video 容器设 position: relative：
<div class="video-wrapper" style="position: relative; width: 100%; height: 100%;"><video id="player" playsinline></video><div class="controls" style="position: absolute; bottom: 0; left: 0; right: 0;"></div>
监听全屏状态，动态切换 CSS 类名
利用 fullscreenchange 事件判断当前是否处于全屏模式，给最外层容器添加类名（如 is-fullscreen），再通过 CSS 分别定义两种状态下的控制栏高度、字体大小、按钮间距等：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- JavaScript 中监听：
document.addEventListener('fullscreenchange', () => {<br> const wrapper = document.querySelector('.video-wrapper');<br> if (document.fullscreenElement) {<br> wrapper.classList.add('is-fullscreen');<br> } else {<br> wrapper.classList.remove('is-fullscreen');<br> }<br>}); - CSS 中响应：
.controls { height: 48px; }<br>.video-wrapper.is-fullscreen .controls { height: 64px; font-size: 18px; }<br>.video-wrapper.is-fullscreen .progress { height: 12px; }
修复 iOS Safari 全屏下 controls 被遮挡问题
iOS Safari 进入全屏后会强制拉伸 video 元素并覆盖部分自定义控件，需额外处理：
立即学习“前端免费学习笔记（深入）”；
- 给
<video>添加playsinline属性，避免跳转原生播放器界面 - 全屏后手动重设 video 尺寸：
if (document.fullscreenElement) {<br> video.style.width = '100vw';<br> video.style.height = '100vh';<br>} - 控制面板加
z-index: 10并配合pointer-events: auto确保可点击
避免使用固定像素值做全屏适配
控制栏内的进度条、音量滑块等组件，优先用百分比或 flex 布局，而非固定 width: 300px：
- 进度条容器设
flex: 1或width: calc(100% - 120px)（预留按钮宽度） - 按钮图标用
em或rem单位，随父级 font-size 缩放 - 全屏时可统一放大整个
.controls：.is-fullscreen .controls { transform: scale(1.2); transform-origin: bottom center; }
