Forcing captions for youtube in a specific languge?

[anthonygrignoux]

Hi, I'm losing my mind over how to pass the parameters that would force the display of the youtube close-captions
(as in the one that have been contributed through youtube), and in a chosen language.

I'm using the react version of VidStack.

There is a provider option called language that does not seem to force anything at all.
And most of the time, depending on the video I can't seem to force the close-captions to appear.

I've tried to pass the full url of the youtube video to MediaPlayer including the parameters cc_lang_pref (to 'fr' in my specific case) and cc_load_policy (to 1).

No success there either.

The type of the provider does not reveal any other options or parameters that would solve this problem.

I can't reproduce the bug on StackBlitz because apparently Youtube blocks them, so here a simplified version of my component without the imports or the types.

I'm trying to make it work with the video with the following ID: 8XxxtI5wCYo
The latter has subtitles in both English and French

const VideoYoutube: FC<VideoYoutubeProps> = ({
  className,
  options,
}) => {
  const onProviderChange = (provider: MediaProviderAdapter | null) => {
    if (isYouTubeProvider(provider)) {
      provider.cookies = false
      provider.color = 'white'
      provider.language = 'fr'
    }
  }
  const player = useRef<MediaPlayerInstance>(null)
  const id = useId()

  const isPlaying = !useMediaState('paused', player)

  return options?.videoId ? (
    <div className={cx('VideoYoutube', className)}>
      <MediaPlayer
        title={options?.title}
        src={`https://www.youtube.com/watch?v=8XxxtI5wCYo&cc_lang_pref=fr&cc_load_policy=1`}
        onProviderChange={onProviderChange}
        playsInline={true}
        className="vs-player"
        ref={player}
      >
        <MediaProvider className="vs-provider" />
        <Controls.Root className="vs-controls">
          <Controls.Group className="vs-controls__bottom">
            <PlayButton
              className="vs-play"
              id={`${id}__play`}
              aria-labelledby={`${id}__label--play`}
            >
              {isPlaying ? (
                <span>Pause</span>
              ) : (
                <span>Play</span>
              )}
            </PlayButton>
          </Controls.Group>
          <Controls.Group className="vs-controls__progress">
            <TimeSlider.Root className="vs-progress is-alone">
              <TimeSlider.Track className="vs-progress__track">
                <TimeSlider.TrackFill className="vs-progress__fill" />
                <TimeSlider.Progress className="vs-progress__progress" />
              </TimeSlider.Track>
            </TimeSlider.Root>
          </Controls.Group>
        </Controls.Root>
      </MediaPlayer>
    </div>
  ) : null
}

[mihar-22]

Native YouTube embed controls are disabled when displaying your own. YouTube captions will not show if they are disabled. You can either load your own custom captions, or opt to use default embed controls by first removing any custom controls and then setting controls on the player:

<MediaPlayer controls>

[anthonygrignoux]

Sorry was off for a little time.
Well I don't know how it happens but I actually see the captions on some youtube videos which feature some.

Maybe some cookies or storage info from my using youtube, idk...

So I was trying to use any kind of option to be able to choose the language they're in.