Introduction

THEOplayer allows you to style the player to your own needs. This guide will give an in-depth explanation of which colors can be changed and which parts of the player are affected. First it will explain how to change the skin of your player using 6 custom CSS classes. Afterwards, an overview follows explaining which parts of the players are affected by each class. If you don't already have an up-and-running version of THEOplayer, take a look at our getting started guide.

CSS properties to override

THEOplayer provides multiple colors you can change to create your desired look-and-feel. These colors can be changed easily by including a custom CSS file which overrides some classes. An example of such a file is given below. There is also a demo page available where you can interactively change these colors and immediately see the effect here. NOTE: The vjs-selected is needed to change the color of selected items in the menus.


<style> 
.theo-primary-color, .vjs-selected { 
    color: #ffc50f !important; 
}
 
.theo-primary-background {
    color: #000000 !important;
    background-color: #ffc50f !important; 
}

.theo-secondary-color { 
    color: #ffffff !important;
}

 .theo-secondary-background {
    color: #000000 !important; 
    background-color: #ffffff !important; 
}

 .theo-tertiary-color { 
    color: #000000 !important; } 

.theo-tertiary-background { 
    color: #ffffff !important; 
    background-color: #000000 !important; 
} 

</style>

Affected Components

This section discusses which parts of the components are affected by each CSS class. 

When the player is added to the page, the only visible control is the big-play-button. The color of this component is equal to the theoplayer-primary-color.

player-init.png

When the big-play-button is clicked, the player starts playing the video. Two components are visible now: the control-bar and the sharing button.

player.png

The background color of the control bar can be styled using theoplayer-tertiary-color.

The control bar exists of: control-bar-icons, the progress bar and menus.

  • The color of the control bar icons can be set using theoplayer-secondary-color.
  • The color of the progress bar can be set using theoplayer-primary-color.
  • The color and background color of the header of the menu can be set using theoplayer-primary-background.
  • The color and background color of the content of the menu can be set using theoplayer-tertiary-background.
  • The color of the selected text of the menu can be set using theoplayer-primary-color.

control-bar.png

Summary

After this tutorial, you should be able to style your THEOplayer to your own needs. All CSS properties and the components they affect were discussed. A brief summary of these properties is given below:

Color Affected components
Primary color Big play button, progress bar, menu text 
Primary background Menu header
Secondary color Control bar icons (including time and tooltips)
Secondary background Social sharing close button
Tertiary color Control bar background
Tertiary background Menu content background