UI Customizations

The UI tries to cover the most common use cases however for advanced use cases we recommend using the version without UI and creating a custom UI yourself. However, if the default UI is almost sufficient and you just need a few small adaptations we offer some options.

Theming

By default the player will use a black and white color scheme with yellow as accent color. You can change these colors using the API or the console. You can find more information here.

Hiding / Customizing elements

The player uses web components to build its UI. This ensures no CSS is leaked on your page but provides a bit less flexibility when it comes to styling. It is still easy to remove a component for example.

To hide the play/pause button you can use:

theo-live::part(play-button) {
  display: none;
}

The parts you can style like this are:

  • logo
  • announcement
  • watermark
  • loading-indicator
  • center-play-button
  • play-button
  • mute-button
  • volume-range
  • live-button
  • quality-button
  • fullscreen-button
  • error-display