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
Updated over 1 year ago