To use the custom skins, you must write the customization similar to default-video-controls.css and refer to this new customization in the player.
For example, you can use one of the following options:
<link rel="stylesheet" href="css/common_style.css">
<link rel="stylesheet" href="css/custom-video-controls1.css">
You can make the following types of changes:
Foreground color of buttons and text
All the controls which have a foreground are using the
vid-skin-fgcolor class. To change the foreground of all the controls, iterate through all the elements with the
vid-skin-fgcolor class and specify the desired color.
Background color of buttons and text
All the controls that have a foreground are using the
vid-skin-bgcolor class. To change the foreground of all the controls, iterate through all the elements with
vid-skin-bgcolor class and specify the desired color.
Shape of play head
The play head can be square or round. To change the play head, add
round class to
Style of the buffering spinners
The reference player provides the following styles of spinners can be displayed as the player buffers content:
Rectangular Spinner (
Vertical Bars (
To use any of the buffering spinners, you must add the class in the buffering-overlay element. For example, to use
overlay-text, add the following lines in the
var overlay = document.getElementById("buffering-overlay"); overlay.classList.add ("spinner");