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
• CSS properties to override
• Affected Components
• Summary
• Mobile

SDKs

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.

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:

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 .

Legacy iOS/tvOS SDK (4.12.x)

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

Legacy Android SDK (4.12.x)

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>