---
title: media-i18n
description: HTML custom element that resolves locale and supplies translations to descendants
---

import DocsLink from "@/components/docs/DocsLink.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";

<FrameworkCase frameworks={["html"]}>

`<media-i18n>` applies the i18n provider mixin to a subtree. Wrap a player, standalone controls, or one of several players that need different locales with this element. Without it, HTML controls use English defaults.

Set `lang` on the provider or an ancestor. Built-in packs lazy-load automatically; register locale strings with <DocsLink slug="reference/register-i18n">`registerI18n`</DocsLink> when you need custom copy or synchronous first paint. See <DocsLink slug="reference/translation-phrases">Translation keys</DocsLink> for supported keys.

```html
<script type="module">
  import '@videojs/html/i18n';
  import '@videojs/html/i18n/locales/es/register';
</script>

<media-i18n lang="es">
  <media-text token="buttons.play">Play</media-text>
</media-i18n>
```

## Attributes

| Attribute | Description |
| --- | --- |
| `lang` | Forces the active BCP 47 locale for this subtree. Omit to inherit the nearest ancestor `[lang]`. |

## Related

- <DocsLink slug="reference/media-text">`<media-text>`</DocsLink>: Renders translated text content
- <DocsLink slug="how-to/i18n-register-locale">Register a custom locale</DocsLink>

</FrameworkCase>
