# Localization

Language: English (en)

This sample demonstrates localizing the UI and switching language at runtime. A locale is registered with `addLocale`, and the language is selected through the `lang` attribute. Use the dropdown below the player to switch between English and Dutch. See also the [localization guide](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/ui/open-video-ui/guides/localization.md).

Code

```html
<script type="module">
    import { addLocale } from '@theoplayer/web-ui';

    addLocale('nl', {
        playAria: 'afspelen',
        pauseAria: 'pauzeren',
        languageMenuHeading: 'Taal',
        subtitleMenuHeading: 'Ondertitels',
        subtitleOff: 'Uit',
        settingsMenuHeading: 'Instellingen'
    });
</script>

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

<select id="lang-select">
    <option value="en">English</option>
    <option value="nl">Nederlands (Dutch)</option>
</select>

<script>
    document.querySelector('#lang-select').addEventListener('change', (event) => {
        document.querySelector('#ui').setAttribute('lang', event.target.value);
    });
</script>
```

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