Video.js HTML5 Player侧边栏视频全屏切换异常求助

我之前也碰到过类似的全屏元素被浏览器判定为「已移除」导致自动退出的情况，结合你给出的Firefox警告信息，给你几个排查和修复的方向：

• 优先排查DOM元素被动态移除/移动的情况
  Firefox的警告"Exited fullscreen because fullscreen element was removed from document."已经很明确了：全屏触发后，你的侧边栏视频元素被从DOM文档里移除了（或者被移动到了一个被隐藏/移除的容器里）。
  你可以用浏览器的开发者工具来定位问题：

  1. 右键侧边栏的视频元素，选择「检查」打开元素面板
  2. 在元素面板里右键选中的视频元素，选择「Break on」→「Subtree modifications」（或者「Node removal」）
  3. 点击全屏按钮触发问题，此时浏览器会在有脚本修改/移除这个视频元素时自动断点，你就能看到是哪段代码在搞鬼了。
     大概率是页面的侧边栏交互脚本（比如滚动时的布局调整、侧边栏折叠逻辑）或者广告/统计脚本误操作了视频元素。

• 检查Video.js初始化和容器配置
  有时候如果Video.js初始化的父容器是一个会被动态修改的元素（比如侧边栏里的可折叠模块），全屏时容器的变化可能间接导致视频元素被「挤出」DOM。
  你可以尝试：

  1. 确保直接给<video>元素初始化Video.js，而不是它的父容器：

     const sidebarVideoPlayer = videojs('你的侧边栏视频ID');
     

  2. 检查侧边栏容器的CSS，有没有在全屏时触发overflow: hidden、display: none这类会隐藏元素的样式，或者动态切换的类名。

• 排查脚本冲突
  暂时禁用页面里的非必要脚本（比如侧边栏的滚动加载、自定义交互脚本），测试侧边栏视频的全屏功能是否正常。如果恢复正常，再逐个启用脚本，找到冲突的那个，然后调整它的执行逻辑，避免在全屏状态下修改视频元素的DOM结构。

内容的提问来源于stack exchange，提问作者Nandish Sadrani