Videojs Gold Skin

Gold skin is the most refined one for the player. The colors of the Gold skin are based on CSS variables. This makes skin colors adjustments much easier than changing multiple CSS rules across an entire CSS document.
There are two variations of the Gold skin, one with the progress bar at the bottom of the control bar and one with the progress bar at the top.
Below, you can see a full list of color variables used for Gold skin. Variables are placed at the top of the CSS document, so you can experiment with colors in an easy way. Check out examples of color theme changes below.
Gold Theme Red Theme Grey Theme
--controlbar-bg-colortransparent
--big-play-bg-color#FFC50F
--big-play-color#FFFFFF
--button-icon-bg-colorrgba(0,0,0,.1)
--button-icon-hover-bg-color#FFC50F
--button-icon-color#FFFFFF
--button-icon-hover-color#222222
--menu-bg-color#111111
--menu-hover-bg-color#444444
--menu-color#FFFFFF
--menu-active-color#FFC50F
--menu-active-bg-colortransparent
--menu-secondary-color#FFC50F
--menu-title-bg-color#FFC50F
--menu-title-color#222222
--menu-zoom-level-color#FFFFFF
--menu-zoom-slider-color#444444
--menu-zoom-thumb-color#FFC50F
--tooltip-bg-color#FFC50F
--tooltip-color#FFC50F
--progress-play-color#FFC50F
--progress-load-color#CCCCCC
--progress-ad-color#CC0000
--chapter-marker-color#FFFFFF
--volume-bg-colorrgba(0,0,0,.5)
--volume-slider-color#666666
--volume-level-color#FFFFFF
--volume-thumb-color#FFC50F