如何移除页面加载后Node模块添加的vjs_video_3-dimensions类？

这个类是Video.js初始化播放器时动态生成的，用来控制播放器尺寸布局，给你三个实用方案：

方案一：用JS删掉这个类 #

得等Video.js完全初始化好再操作，不然可能找不到元素。可以用播放器的ready事件：

// 先拿到你的播放器实例，替换成自己的视频ID
const player = videojs('your-video-element-id');
player.ready(function() {
  // 找到那个带问题类的外层div
  const containerDiv = this.el().parentElement;
  containerDiv.classList.remove('vjs_video_3-dimensions');
});

要是记不清视频ID，也可以直接通过类名找：

// 等页面加载完再执行
document.addEventListener('DOMContentLoaded', () => {
  // 加个小延迟确保Video.js已经生成了这个类
  setTimeout(() => {
    const targetDiv = document.querySelector('.vjs_video_3-dimensions');
    targetDiv?.classList.remove('vjs_video_3-dimensions');
  }, 300);
});

方案二：用CSS直接覆盖烂样式 #

不想改JS的话，直接写CSS把这个类的坏影响抵消掉：

.vjs_video_3-dimensions {
  background: transparent !important; /* 去掉黑背景 */
  height: auto !important; /* 取消强制高度，避免页面拉长 */
  min-height: unset !important;
}

这种方法最省事，不用动逻辑，直接把样式掰回来。

方案三：调整Video.js初始化配置 #

这个类的生成大概率和播放器的响应式/流体布局设置有关。如果你不需要自动适配的话，可以试试关了fluid模式：

const player = videojs('your-video-element-id', {
  fluid: false, // 关闭流体布局，可能就不会生成这个类了
});

但要是你需要播放器自适应屏幕，还是前两个方案更靠谱。

内容的提问来源于stack exchange，提问作者Jacob White