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: