YouTube player will not autoplay if window is not focused

[Fauntleroy]

When you use a page with react-player in it, YouTube videos will not autoplay when the window does not have focus. While I'm certain YouTube has good intentions here, my application requires YouTube videos to play automatically regardless of whether the window is focused or not. Here are a few things I've tried but don't seem to work:

• Run .playVideo() after the onReady event of the YouTube player fires
• Constantly run window.focus() in the hope that they have a listener there (nope)

[cookpete]

This seems to happen only when the SDK and iframe have not been loaded yet. That is, playing a youtube video straight after a youtube video works fine in the background because the player is already loaded and ready, but playing a youtube video after a Soundcloud track, or from a fresh load, will not work.

A possible (but annoying) solution would be to constantly have the youtube SDK and frame loaded as long as the ReactPlayer lives, but this wouldn't solve all the issues with this.

[cookpete]

A quick google search returns a few good results with more about this "feature". Notably a post from Francois Beaufort from Google, with various people complaining about this problem.

[Fauntleroy]

According to google, if the tab has had focus at any point it should be able to autoplay media. In practice this is not the case. I need to build some test cases out and see if I can find out what the truth is.

[Fauntleroy]

It looks like the issue is definitely related to players that use iframes.

My theory is that since the content served by the YouTube player's iframe is from a different domain, the tab focus flag is reset every time that player is destroyed and recreated. I'm going to figure out a way to keep the YouTube player's iframe around between player changes, which should eliminate this issue.

[cookpete]

This would eliminate the issue, but we would still need an initial youtube play/click to "activate" the iframe, and I guess there would still be issues with playlists that don't begin with a youtube video. Either way, it sounds like the fix will not be very pleasant..

[Fauntleroy]

Yup, you'll have to "prime" the Vimeo and YouTube players, but that shouldn't be too difficult. I'm gonna try my best not to make your codebase disgusting in the process :)

[Fauntleroy]

After multiple attempts at trying to "preserve" the iframe by other means, it looks like the only way we can circumvent this issue is by making sure the iframe is never moved or destroyed at all. Moving or destroying the iframe causes its contents to load again, revoking its autoplay permission. Since this component currently relies heavily on mounting and unmounting components to work, it'll take a serious rewrite to fix this.

[cookpete]

Hopefully fixed in 0.3.0