After successfully changing the SCSS $primary-background-color to orange using the video.js default skin editor (CodePen), I encountered an issue. Whenever I hover my mouse cursor over the video, the big play button background reverts to its default grayish blue color instead of remaining orange as desired.
I tried delving into the CSS/SCSS within the default skin editor to identify what controls the background color change when hovering over the video but couldn't pinpoint the exact component responsible for this behavior. Perhaps there is another section of the CSS/SCSS or JS that influences this interaction not visible in the editor.
To address this inconsistency, I attempted adding a CSS rule targeting the big play button's hover state specifically. While this made the button orange when directly hovered over, it didn't maintain the preferred color as the mouse traversed across the video leading up to the button.
Summarily, there are three scenarios: one where the custom skin CSS handles the big play button color correctly, another where the hover rule applies the right color only when directly on the button, and finally the case I'm struggling with - maintaining the desired color when hovering over the video but not precisely over the button itself.
If anyone has insights on how to override or adjust settings to ensure the big play button remains consistently orange even while the user hovers the mouse over the video area (excluding the button), I would greatly appreciate your advice. Thank you.