8

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:

enter image description here

Now this is the desired result - from YouTube:

enter image description here

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.

Martavis P.
  • 1,708
  • 2
  • 27
  • 45

1 Answers1

3

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

Arielle Nguyen
  • 2,932
  • 1
  • 20
  • 15
  • Unfortunately, it's not just a visual thing. Whenever the seek position is clicked, the video jumps to the point that's behind the mouse. So hiding the position display won't fix the issue. – Martavis P. Apr 22 '18 at 15:28
  • I think video goes to the seek position on click is the expected behavior. Can you post the expected result gif? – Arielle Nguyen Apr 23 '18 at 03:44
  • Gotcha, it is the position of seek opaque bar that you are looking to fix. It's white on youtube and grey in your case. Thanks for the update! – Arielle Nguyen Apr 23 '18 at 07:54