Skip to content
FrameworkStyle

Override translations

Patch individual i18n strings without replacing an entire locale pack

registerI18n merges. Each call adds or replaces phrases for that locale tag without wiping prior registrations. Use this to tweak shipped packs or A/B test copy.

Read Internationalization for merge order and Translation phrases for the supported keys.

Override after a built-in pack 

import { registerI18n } from '@videojs/react/i18n';
import '@videojs/react/i18n/locales/es/register';

registerI18n('es', { Play: 'Comenzar' }); // only `Play` changes

Later registrations win for the same phrase. The rest of the es pack stays intact.

React provider overrides

Pass translations on I18nProvider to scope overrides to one subtree. This layer sits above registry and lazy packs: 

import { I18nProvider } from '@videojs/react/i18n';
import { Provider, VideoSkin, Video } from '@videojs/react/video';

<Provider>
  <I18nProvider locale="es" translations={{ Play: 'Comenzar' }}>
    <VideoSkin>
      <Video src="..." playsInline />
    </VideoSkin>
  </I18nProvider>
</Provider>

Nested providers inherit the parent locale when you only pass translations: 

<I18nProvider locale="de">
  <I18nProvider translations={{ Play: 'Override' }}>
    {/* locale stays `de`; only `Play` differs */}
  </I18nProvider>
</I18nProvider>

Parametric phrases

Keep required placeholders when overriding: 

// ✅
registerI18n('es', { 'Seek forward {seconds} seconds': 'Adelantar {seconds} segundos' });

// ❌ TypeScript error: missing {seconds}
registerI18n('es', { 'Seek forward {seconds} seconds': 'Adelantar' });

What’s next?