Demo THEOplayer

Creating a Chromeless UI

This page demonstrates how to make a UI from the ground up. This can be useful when you have an existing theme and want to migrate it to THEOplayer.


To achieve this, we used:

  • theoplayer.chromeless.js: this version of the THEOplayer library is a stripped-down version of theoplayer.js, with no relation to the default UI.
  • the THEOplayer API: this allows us to control all the elements related to video playback.
  • HTML and CSS to style and make up the UI.

The player below is a very simple example, only containing a play and pause button, and a timeline. You can make your UI as extensive as you want. Interesting fact: the default player UI is made entirely through the exposed 3.X API; we don't rely on any internal functions.

Chromeless Player UI: Play



HTML code:

<div id="video-container" class="ui">
    <div class="controls">
        <div class="toggle">Play</div>
        <div class="timeline">
            <div class="currentTime"></div>
            <div class="duration"></div>


JavaScript code:

var toggleElement = document.querySelector('.ui .controls .toggle');
// listen to clicks to toggle play/pause
toggleElement.addEventListener('click', function() {
    if (player.paused) {;
        toggleElement.innerHTML = "Pause";
    } else {
        toggleElement.innerHTML = "Play";

var currentTimeElement = document.querySelector('.ui .controls .currentTime');
// update current time every timeupdate event
player.addEventListener('timeupdate', function() {
   currentTimeElement.innerHTML = Math.floor(player.currentTime); 

var durationElement = document.querySelector('.ui .controls .duration');
// update duration on loaddedata event
player.addEventListener('loadeddata', function() {
   durationElement.innerHTML = Math.floor(player.duration); 


CSS code:

.ui {
    background: #000000;
    width: 100%;
    height: 277px;

.ui .controls {
    position: absolute;
    bottom: 0px;
    width: 100%;
    z-index: 100;
    background: rgba(255, 255, 255, 0.8);

.ui .controls div {
    float: left;

.ui .controls .toggle {
    cursor: pointer;
       margin: 0px 10px;

Still wasting time debugging video playback problems?

Welcome to cutting-edge video, delivered efficiently and on any platform. We think you're going to like it.

Request A Demo