How to remove an element from the UI on Web

You may want to limit the options and controls that are shown in the player's UI.

There are two general approaches:

1. Build a chromeless UI, and add only the controls you need. This is useful when you don't want to remove just one element, but want a radically different UI.
2. Hide or remove the individual element from the existing UI.

This guide focuses on the second approach.

Code examples

You can hide an element through CSS, or remove it through JavaScript. For this example we will consider the Speed menu option (control bar > Settings > Speed) as the element to remove from the page. The following methods may of course be used for other elements.

Hide the element with CSS

We identify the element and hide it. Since In this specific case there is no id or class to identify this element specifically, we make use of its aria attribute. Of course, should it change, this line of code should be adapted accordingly.

.theoplayer-skin li[aria-label='Open the video speed settings menu'] {
  display: none !important;
}

Remove the element through JavaScript

In alternative to CSS, it is also possible to achieve the same result with JavaScript, in the following way.

function firstplay(event) {
  player.removeEventListener('playing', firstplay);
  var speed = document.querySelector('.theoplayer-skin li[aria-label="Open the video speed settings menu"]');
  speed.parentNode.removeChild(speed);
}
player.addEventListener('sourcechange', function () {
  player.removeEventListener('playing', firstplay);
  player.addEventListener('playing', firstplay);
});