Show Menu
TOPICS×

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:
  • <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 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 )
      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");
      ```      >