Custom skins

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:

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 square or round class to playhead element.
Style of the buffering spinners

The reference player provides the following styles of spinners can be displayed as the player buffers content:
- Overlay-text ( overlay-text)
- Rectangular Spinner ( spinner)
- Signal ( signal)
- Vertical Bars ( vertical)
  TIP
  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 BufferOverlay.js file:
```
var overlay = document.getElementById("buffering-overlay");
overlay.classList.add ("spinner");
```

New and improved search