Video.js Seek Bar - Seek point behind mouse cursor

Question

I'm using Video.js (v6.9) and I don't understand why the seek position is behind the mouse cursor. The worst part is, Firefox is the only browser that renders it correctly, so I can't pinpoint what the issue is. Here's a screen grab of what's happening:

Now this is the desired result - from YouTube:

Basically, where the mouse is clicked is not where the video starts.

Things I've tried:

• Updating Video.js from 6.2 to 6.9
• Removing all custom styles

Any idea what's happening here? I'm using React and NPM if that's helpful.

Answer 1

You can specify your own class to your videojs component to override the default videojs styling or :

.video-js .vjs-progress-control .vjs-mouse-display {
  background-color: transparent !important;
}

Working example: https://codesandbox.io/s/rmwokj6rrq