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)

      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");
      

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now