Video.js(vjs)播放器全屏模式下边框无法移除问题求助

我尝试移除Video.js播放器全屏模式下的边框，但始终没有成功，查阅了相关wiki也未找到对应的解决方案。

相关代码 #

HTML代码 #

<div style="width: 99%; height: 50%; margin-left:0.5%;">
    <video id="player" style="padding: 0; margin: 0; width: 100%; height: 100%;" class="video-js vjs-http-source-selector vjs-big-play-centered" preload="auto" data-setup='{"language":"fr"}' controls >
    </video>
</div>

JS初始化代码 #

var options = 
  {
    playbackRates : [0.5,1,1.5,2],
    userActions : {
    //hotkeys: 
},
    plugins: {
      httpSourceSelector:
      {
        default: 'auto'
      }
    },
  };
var player = videojs('player', options);
player.src("default.mp4");
player.play();
player.pause();
player.fluid(true);
player.fill(true);
player.src(dossier+'/'+fichier);

问题现象 #

该边框问题通常由默认样式残留、外层容器边距影响、全屏元素选择不对三个原因导致，按以下步骤调整即可解决：

• 新增CSS样式覆盖默认边框/轮廓配置，将以下代码加入全局样式表中：

/* 移除video元素默认边框、轮廓、阴影 */
#player, .video-js {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
/* 覆盖全屏状态下的所有边距配置 */
.video-js.vjs-fullscreen,
.video-js:-webkit-full-screen,
.video-js:-moz-full-screen,
.video-js:-ms-full-screen,
.video-js:fullscreen {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  left: 0 !important;
  top: 0 !important;
}

• 修改JS初始化配置，指定全屏元素为video标签本身，避免外层div的99%宽度、0.5%左边距影响全屏效果，调整options配置如下：

var options = 
  {
    playbackRates : [0.5,1,1.5,2],
    // 新增全屏配置，指定全屏元素为player本身
    fullscreen: {
      element: document.getElementById('player')
    },
    userActions : {
    //hotkeys: 
    },
    plugins: {
      httpSourceSelector:
      {
        default: 'auto'
      }
    },
  };

• 删掉冲突的初始化配置：fluid和fill两个API功能互斥，fluid是按宽高比自适应，fill是填充整个父容器，按需保留一个即可，建议删掉player.fluid(true)只保留player.fill(true)。

内容的提问来源于stack exchange，提问作者PommeGolden _