logo

UI Skinning

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.

Table of Contents

SDKs

Web SDK Android SDK iOS SDK tvOS SDK Android TV SDK Chromecast SDK
Yes Yes Yes No No No

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 hereNOTE: 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.

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.

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.

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
Teriary background Menu content background

Mobile

Our mobile player uses the same class naming as our web version, so this is applicable to mobile as well. The CSS changes are to be gathered in a custom .CSS file, added to your project and then loaded into the PlayerConfiguration. More information on How to add CSS or JavaScript files to an Android/iOS project .

iOS SDK
let cssPath = Bundle.main.path(forResource: "style", ofType: "css")!
let theoConfig = THEOplayerConfiguration(cssPaths: [cssPath])
let theoplayer = THEOplayer(with: //frame, configuration: theoConfig)
Android SDK

You can do this either by XML:

<com.theoplayer.android.api.THEOplayerView
    android:id="@+id/theo_player_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultCss="true"
    app:cssPaths="path/to/style1.css"/>

Or directly in the player config in Java:

THEOplayerConfig playerConfig = new THEOplayerConfig.Builder()
        .chromeless(false)
        .defaultCss(true)
        .cssPaths("path/to/style1.css","path/to/style2.css") // Path is relative to the location of the assets directory
        .build();
THEOplayerView tpv = new THEOplayerView(this, playerConfig);

It is also possible to change certain parts of the UI by editing the xml resources directly. E.g. colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#E361FF</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
</resources>
github
Make sure to follow us on GitHub!
THEO-logo-white
twitter
facebook
linkedin
Copyright © 2020. All Rights Reserved.
Leuven
New York
Singapore
Barcelona