In Video.js, where can I change the big play button color when the mouse is hovering over the video?

Question

Using the video.js default skin editor (CodePen), I successfully changed the SCSS $primary-background-color to a shade of orange (specifically #f60), which generated CSS to give the background of the control bar components and the big play button variations of orange.

This works fine, but when I move the mouse cursor over the video, the big play button background changes to grayish blue (the default), and then back to orange when the mouse is not over the video. I'd prefer to have the big play button remain orange whenever it is displayed, no matter where the mouse is.

I hunted around in the CSS/SCSS in the default skin editor, but can't see what is controlling the background color of the big play button when the mouse is over the video. I'm sure I'm missing something, or perhaps this is controlled in another part of the CSS/SCSS or JS that is not exposed in the video.js default skin editor.

I tried adding the following to my CSS:

    .video-js .vjs-big-play-button:hover {
        background-color: rgba(255, 102, 0, 0.7);
    }

and that gives me an orange big play button when I'm hovering over the button itself. But I would like the button to remain orange as the mouse travels over the video before it gets to the button (ie, I want the button to remain orange all the time).

So, there are three cases, two of which work and one that I'm trying to get working:

1. When the mouse is completely outside the video.js player area, the big play button has the right color (handled by the custom skin CSS).
2. When the mouse is hovering over the big play button itself, the button has the right color (handled by the hover rule shown above).
3. When the mouse is hovering inside the video.js player area, but is not hovering directly over the big play button, the button has the default color, not the color I want it to have. This is the part I'm having trouble with.

What do I need to change/override to ensure the big play button will stay orange even while the user hovers the mouse over the video (and not over the button itself)? Thanks.

Answer 1

The pen is missing the secondary background colour and hover state styles

$secondary-background-color: lighten($primary-background-color, 33%) !default;
.video-js:hover .vjs-control-bar,
.video-js:hover .vjs-big-play-button,
.video-js:hover .vjs-menu-button .vjs-menu-content {
  background-color: $secondary-background-color;
  background-color: rgba($secondary-background-color, 0.7);
}

Here's an updated codepen