Add Ons

We are continually updating and including new additions to our range of THEOplayer Add Ons.

UI Skinning

Providing simple User Interface skinning options.

skinnable-user-interface ui user-interface
UI Skinning

ADD

Free

As a kickstart option, this Add-On adds simple UI skinning features to effortlessly get the look and feel that fits common customisation needs. As an alternative, THEOplayer’s ‘chromeless’ approach provides full control over the THEOplayer UI. Leveraging the players rich API, in applications where UI customisation needs to go beyond what is supported by this Add-On.

With this Add-On you will have the means not only of changing colours of the UI, but also:

  • Customising initial start playback button.
  • Changing how a video should be fit inside a container (e.g. supporting ‘responsive’ web designs)
  • Adding custom control buttons to the video control bar
  • Customising and removing elements (like buttons or menu items) from the UI
  • Changing the position where the timeline is displayed
  • Implementing keyboard hotkeys, and
  • Adding support to other languages.

Category

User Interface

Platforms

HTML5

Android

iOS

What is 'Chromeless’ UI vs Using the Player’s UI API?

A 'chromeless' player gives you a player without any pre-existing or pre built UI. This allows you to build your own custom UI using the Javascript API of the player, and you can use any combination of HTML, CSS and Javascript. This can be very powerful, but requires more work than using the prebuilt UI. 

Using the player with the prebuilt UI still allows you to change aspects of the UI using the UI API, but it is limited to simple customisations. Using this pre-built UI allows you to provide a full player experience with minimal effort.

 

Why should I implement UI Skinning, using the UI API?

UI Skinning allows you to get hands on with the customization of the user interface of your online video player. With this approach you can make basic changes to the UI, without having the extra effort of chromeless UI.

 

What are the benefits of using 'chromeless' UI customisation?

With the UI Skinning Add On for your video player you can easily customise and align the style of your player with your brand. 

 

How do I implement UI Skinning for THEOplayer?

You can implement the THEOplayer UI Skinning API by simply logging onto THEOportal, and adding the UI Add-On to your player, via the configuration section in Player Information. Once you have enabled the UI Skinning feature/add-on you will have access to use and customize the player's default UI elements. This only applies if you decide not to go for the 'chromeless' player approach, described above.

Want to download our UI Skinning Cheat Sheet? Fill in the form below.