# Modern UI

Source: Big Buck Bunny (bigBuckBunny)

This sample demonstrates a modern, streaming-service style custom UI: a centered playback "pill" with rewind, play/pause and forward, a full-width seek bar, and rounded translucent control clusters.

Code

```html
<theoplayer-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"},"metadata":{"title":"Big Buck Bunny"}}'
>
    <div slot="centered-chrome">
        <div class="pill center-pill">
            <theoplayer-seek-button seek-offset="-10"></theoplayer-seek-button>
            <theoplayer-play-button></theoplayer-play-button>
            <theoplayer-seek-button seek-offset="10"></theoplayer-seek-button>
        </div>
    </div>
    <div class="bottom-chrome">
        <theoplayer-control-bar>
            <theoplayer-time-range></theoplayer-time-range>
        </theoplayer-control-bar>
        <div class="bottom-row">
            <span class="pill">
                <theoplayer-play-button></theoplayer-play-button>
                <span class="volume">
                    <theoplayer-mute-button></theoplayer-mute-button>
                    <theoplayer-volume-range></theoplayer-volume-range>
                </span>
                <theoplayer-time-display show-duration></theoplayer-time-display>
            </span>
            <span class="spacer"></span>
            <span class="pill">
                <theoplayer-language-menu-button menu="language-menu"></theoplayer-language-menu-button>
                <theoplayer-fullscreen-button></theoplayer-fullscreen-button>
            </span>
        </div>
    </div>
    <theoplayer-language-menu id="language-menu" slot="menu" hidden></theoplayer-language-menu>
    <theoplayer-error-display slot="error"></theoplayer-error-display>
</theoplayer-ui>
```

[📜 View full source on GitHub](https://github.com/THEOplayer/web-ui/blob/main/docs/static/open-video-ui/v2/examples/web/modern/demo.html)