YouTube embed missing referrerpolicy

[Slgoetz]

it seems that without referrerpolicy: 'strict-origin-when-cross-origin', there is a Error 153.

"react-player": "^3.3.3"

<ReactPlayer
                  style={videoPlayerStyle}
                  src={videoUrl}
                  width="100%"
                  height="100%"
                  controls={true}
                  playing={false} // Don't autoplay
                  config={{
                     youtube: {
                        origin: window.location.origin,
                        enablejsapi: 0,
                     },
                  }}
               />

<iframe src="https://www.youtube.com/embed/fOAIrUZbOwo?preload=metadata&amp;enablejsapi=0&amp;showinfo=0&amp;rel=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;origin=http%3A%2F%2Flocalhost%3A3333" frameborder="0" width="100%" height="100%" allow="accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture" data-config="{&quot;origin&quot;:&quot;http://localhost:3333&quot;,&quot;enablejsapi&quot;:0}" id="widget2"></iframe>

[andrei-cimpan]

There is an open PR on the media-elements library: https://github.com/muxinc/media-elements/pull/171 After it is released, we can request updates to react-player.

[MMDH05]

Is this the reason why I keep getting: Error 153 Video player configuration error

??

[andrei-cimpan]

@MMDH05 yes :)

[MMDH05]

Hoping this gets fixed soon 😭

[vpapidze-epam]

Hello, is there ETA, when this could be resolved? or is there any workaround meanwhile ?

[reintroducing]

@cookpete Now that the media-player update was made, is it possible to update the dependencies here to get this resolved?

[luwes]

https://github.com/cookpete/react-player/releases/tag/v3.4.0 was released with media elements upgrades. Could you verify it solved it? You can now add a referrerpolicy in the config

https://github.com/muxinc/media-elements/pull/189

[reintroducing]

@luwes we have a build that runs overnight and i can test it tomorrow and get back to you. thank you.

[reintroducing]

@luwes our QA team tested the nightly build and we are still unfortunately getting the error. This is the updated code, let me know if I did something incorrectly:

<ReactPlayer
  src={src}
  width={width}
  height={height}
  controls={false}
  autoPlay={autoPlay}
  config={{
    youtube: {
      referrerpolicy: 'strict-origin-when-cross-origin',
      enablejsapi: 1,
      fs: 0,
    },
  }}
/>

[andrei-cimpan]

@luwes @reintroducing i just did a quick test and it works fine for me with this config:

config={{
  youtube: {
    referrerpolicy: 'strict-origin-when-cross-origin',
  },
}}

Thank you for your support!

[reintroducing]

@andrei-cimpan hmm, other than the other config params i have in there (which shouldn't impact this), i'm not seeing anything different

[reintroducing]

@luwes i can see on our build machine that the youtube-video-element package is pulling down version 1.8.0 which i believe is the correct version that should have this fix, but our videos are still not playing and we're seeing the error still. you can see my config above. any idea on what may be happening or if the changes did indeed fix the issue properly?

[luwes]

see https://codesandbox.io/p/devbox/react-player-youtube-config-67w5cz

[jonathanhallee]

@luwes I acknowledge it works on the code sandbox but i'm in the same boat as @reintroducing. I still couldn't get it to work. Made sure I was on correct version, that my package lock was fine etc but the best I was having is intermittent failures where the config wasn't properly applied on the iframe (I'd say 50% of the time the referrer policy wasn't applied on the iframe)

For now i've settled on onError callback to re-render the player whenever I see the error 153. I couldn't pinpoint the original issue causing this. I guess some interaction with our overall solution but hard to say...

For reference if it can help anyone in the future this is our implementation with the retries:

interface ResponsivePlayerProps {
  url: string;
}

export function ResponsivePlayer({ url }: ResponsivePlayerProps) {
  const [retryAttempt, setRetryAttempt] = useState(0);

  const handleError = useCallback(() => {
    if (retryAttempt < 3) {
      // Retry by forcing a URL change which triggers a reload of the player
      // This helps with race conditions where config (referrerpolicy) might not be set in time
      setRetryAttempt((prev) => prev + 1);
    }
  }, [retryAttempt]);

  const playerUrl = useMemo(() => {
    if (retryAttempt === 0) {
      return url;
    }
    const separator = url.includes('?') ? '&' : '?';
    return `${url}${separator}retry=${retryAttempt}`;
  }, [url, retryAttempt]);

  const config = useMemo(
    () => ({
      youtube: {
        referrerpolicy: 'strict-origin-when-cross-origin',
      },
    }),
    [],
  );

  return (
    <Box
      sx={{
        position: 'relative',
        paddingTop: '56.25%', // 16:9 aspect ratio
        '& > div': {
          position: 'absolute',
          top: 0,
          left: 0,
        },
      }}
    >
      <ReactPlayer
        src={playerUrl}
        width="100%"
        height="100%"
        controls
        playing={false}
        config={config}
        onError={handleError}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
        }}
      />
    </Box>
  );
}

[reintroducing]

For anyone still having issues with this, i ended up rolling my own solution based on https://medium.com/@davidvesely.cz/fixing-youtube-error-153-in-ios-capacitor-apps-a-simple-proxy-solution-5807d3df83d5 and it works flawlessly.