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

import { DefaultUI } from '@theoplayer/react-ui';

// In your stylesheet, hide the seek bar by targeting its shadow part:
//
//   theoplayer-default-ui::part(time-range) {
//       display: none;
//   }

const configuration = {
    libraryLocation: '/path/to/theoplayer/',
    license: 'your_theoplayer_license'
};

const source = {
    sources: { src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8' },
    metadata: { title: 'Big Buck Bunny' }
};

const App = () => {
    return <DefaultUI configuration={configuration} source={source} />;
};

📜 View full source on GitHub