support Contact Support | system status System Status
Page Contents

    Styling Playlists

    In this topic, you will learn how to style playlists.

    Overview

    If you wish to alter the look of playlists, you can do so using CSS. In this document you will see a number of styles you can change. Of course, the possible changes are numerous and you need to find the correct selector to accomplish your task.

    Styling a vertical playlist

    The following diagram summarizes the styles altered for a vertical playlist. Following the diagram is a table which lists the styles.

    Control the color of the text on the playlist .vjs-mouse.vjs-playlist {
      color: #E9D2B3;
    }
    Control the color of the
    spaces between playlist items
    .vjs-mouse.vjs-playlist {
      background-color: #161D6E;
    }
    Control the color of the duration text .vjs-playlist .vjs-playlist-duration {
      color: #9BB4DA;
    }
    Control the color of the duration background .vjs-playlist .vjs-playlist-duration {
      background-color: #1160AA;
    }
    Control space between playlist items .vjs-playlist-vertical .vjs-playlist-item {
      margin-top: 20px;
    }

    Styling a horizontal playlist

    The following diagram summarizes the styles altered for a horizontal playlist. Following the diagram is a table which lists the styles.

    Control the color of the text on the playlist .vjs-mouse.vjs-playlist {
      color: #E9D2B3;
    }
    Control the color of the
    spaces between playlist items
    .vjs-mouse.vjs-playlist {
      background-color: #161D6E;
    }
    Control the color of the duration text .vjs-playlist .vjs-playlist-duration {
      color: #9BB4DA;
    }
    Control the color of the duration background .vjs-playlist .vjs-playlist-duration {
      background-color: #1160AA;
    }
    Control space between playlist items .vjs-playlist-horizontal .vjs-playlist-item {
      margin-left: 5px;
    }

    Hiding the scrollbar

    A scrollbar on the horizontal playlist is not needed, but will appear. If you wish to hide the scrollbar the following style does just that:

    div.vjs-playlist.vjs-playlist-horizontal {
      overflow-y: hidden;
    }

    The following screenshots show the scrollbar appearing in the playlist, then it hidden:


    Page last updated on 14 Mar 2020