Youtube video, auto starts on mobile although the `playing` is false

[dennisat]

Current Behavior

This is only happening on Youtube videos, and only on mobile devices.

For a Youtube video with playing: false & controls: false, only the video starts playing on mobile devices (unexpected), while on desktop browsers, it doesn't (expected). The mobile browser is Chrome on Android.

For the same video, if we set playing: false & controls: true the, the video doesn't start on mobile and desktop.

It looks like the controls: true respected the playing: false, but this doesn't make any sense.

Expected Behavior

For a Youtube video with playing: false & controls: false, the video should not auto-start on mobile devices or desktop devices.

Steps to Reproduce

Described above

Environment

• URL attempting to play: https://www.youtube.com/watch?v=VQCfbmhIjzo
• Browser: Chrome
• Operating system: Android latest

[valenciaHQ]

Any update about this? I'm facing something similar.

[cookpete]

There are warnings in the readme about both mobile and autoplay not always behaving how you want. Unfortunately we are at the mercy of browsers and how they natively deal with media being played.

It looks like the controls: true respected the playing: false, but this doesn't make any sense.

My assumption is that controls give the user the ability to play the media. Without controls, the browser thinks the user cannot play it themselves (ignoring playing programmatically) and so it autoplays? I’m not sure.

I don’t really know what we can do about this in this library. It’s pretty much between the Youtube player API and the native browser code.

[dennisat]

Hey guys, this is happening in a completely random manner. However, I managed to fix this problem by wrapping it in another component. If the autoStart is set to false, I won't render the react-player but instead show the preview image of the video. This ensures that the video won't accidentally start.

In general, I don't believe that this issue is a bug in the react-player library. There doesn't seem to be anything complex involved, and the problem occurs randomly, even in incognito mode! It's quite baffling.

Anyway, here's the code to obtain the preview image from YouTube for a video, in case anyone wants to make this workaround.

export const dynaCMSYouTubeAPIKey = "YOUR_YOUTUBE_API_KEY";

export const getVideoPreviewImage = async (youTubeUrl: string, youTubeApiKey: string = dynaCMSYouTubeAPIKey): Promise<string> => {
  const videoId = getQueryFromURL(youTubeUrl).v;
  if (!videoId) throw new Error(`getVideoPreviewImage 20230517212109: Cannot find the video id in this url: [${youTubeUrl}]`);

  const apiUrl = `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&part=snippet&key=${youTubeApiKey}`;

  const response = await fetch(apiUrl);
  const data = await response.json();
  const {thumbnails} = data.items[0].snippet;

  // Get the thumbnail with the highest resolution
  const thumbnail = getHighestResolutionThumbnail(thumbnails);
  const thumbnailUrl = thumbnail?.url;
  if (!thumbnailUrl) throw new Error(`getVideoPreviewImage 20230517212125: thumbnails loaded but cannot pick one`);

  return thumbnailUrl;
};

// Helper function to get the thumbnail with the highest resolution
const getHighestResolutionThumbnail = (thumbnails: any): any => {
  const resolutions = ['maxres', 'standard', 'high', 'medium', 'default'];

  for (const resolution of resolutions) {
    if (thumbnails[resolution]) {
      return thumbnails[resolution];
    }
  }

  return null;
};

const getQueryFromURL = (url: string): Record<string, string> => {
  return (
    url
      .split('?').pop()
    || ''
  )
    .split('&')
    .reduce((acc: Record<string, string>, text) => {
      const [key, value] = text.split('=');
      acc[key] = value;
      return acc;
    }, {});
};