Removing controls

Source: Big Buck BunnyElephant's DreamStar Wars Episode VII Trailer

Override device type: DesktopMobileTV

This sample demonstrates how to remove a specific control from the default UI. The default UI exposes its internal controls as CSS shadow parts, so you can hide any of them with ::part(). Here, we hide the seek bar and keep the rest.

Code

<style>
    /* Hide the seek bar. */
    theoplayer-default-ui::part(time-range) {
        display: none;
    }
</style>

<theoplayer-default-ui
    configuration='{"libraryLocation":"/path/to/theoplayer/","license":"your_theoplayer_license"}'
    source='{"sources":{"src":"https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8"}}'
    fluid
></theoplayer-default-ui>

📜 View full source on GitHub