Video.js change Focus style

Question

I'm using Video.js together with Vue.js and Electron.js and I'm trying to change the outline of the video player to something a bit better looking than the standard yellow outline but the outline just stays as it is.
My Video Component:

<template>
  <div id="video-container">
    <video class="video-js" id="video-player" ref="video"></video>
  </div>
</template>

<script>
import videojs from "video.js";

export default {
  name: "Preferences",
  props: ["item"],
  methods: {
    getPath: function () {
      return this.item.dir + "/" + this.item.name + "." + this.item.fileType;
    },
  },
  mounted: function () {
    let options = {
      autoplay: false,
      controls: true,
      fluid: true,
      playbackRates: [0.5, 1, 1.25, 1.5, 1.75, 2],
      controlBar: {
        pictureInPictureToggle: false,
      },
    };
    this.player = videojs(this.$refs.video, options).src(this.getPath());
  },
};
</script>

<style scoped>
#video-player {
  outline: none;
}
</style>

I've also tried !important, #video-player:hover and using the video-container div to change the outline but so far nothing worked.
The outline looks like this:
Video Box outline
button outline

Answer 1

If I understand what you are saying, you are talking about the bowser focus, that blue line around the focus component.

you need something like

.video-js:focus {
   outline-style: none;
}

if still not working you can add !important or add this too

.video-js:focus {
   outline-style: none;
   box-shadow: none;
   border-color: transparent;
}

Normally we don't remove this for the simple reason that could be hard to use Tab around the components. But if you are ok with that go for it!

EDIT (10/02/2021):

So for the video JS, you can actually use your custom class and overwrite the Video-js CSS class in order to do that you will need to create this 3 follow classes in your CSS.

.vjs-matrix.video-js {
  color: #00ff00;
/*put other stuff you need here*/
}

/* Change the border of the big play button. */
.vjs-matrix .vjs-big-play-button {
  border-color: #00ff00;
/*put other stuff you need here*/
}

/* Change the color of various "bars". */
.vjs-matrix .vjs-volume-level,
.vjs-matrix .vjs-play-progress,
.vjs-matrix .vjs-slider-bar {
  background: #00ff00;
/*put other stuff you need here*/
}

And for your HTML

<video class="vjs-matrix video-js">...</video>

Try to play around with this and see if fix your problem!

Source (videojs)