YouTube videos (using latest API) won't play on Chrome on Android? - youtube-api

Question

I'm developing a site for a client and am stuck at this point, as both of us have been able to recreate this issue in Chrome on Android.
For whatever reason, when we load this page on Android in Chrome:
http://miso.gostppro.com
The video loader just keeps spinning and spinning and the video never plays.
And tapping it on it doesn't do anything either (doesn't start the play, doesn't open it in YouTube app, nothing).
It works just fine in other browsers (Firefox for Android loads it and plays it just fine), so I'm confused as to why this is happening.
What am I missing?
Is it some call in the API or something?
I'm lost.

Answer 1

In short, it won't work. Quoting the documentation:
The HTML5 element, in certain mobile browsers (such as Chrome
and Safari), only allows playback to take place if it's initiated by a
user interaction (such as tapping on the player). (...) Due to this
restriction, functions and parameters such as autoplay,
playVideo(), loadVideoById() won't work in all mobile environments.
You're calling event.target.playVideo(); in your onPlayerReady handler, which is not allowed in mobile environments and throws a warning in console (for future reference - I highly recommend using Remote Debugging in Chrome).
So, back to your problem - I'd just get rid of the onPlayerReady handler and use autoplay player variable instead. It should work on desktops and not break the player on mobile either.

Answer 2

I tested your webpage on my Nexus 5 running Android 5.1.1 and found a few issues:
First I was getting this error:
Failed to execute 'postMessage' on 'DOMWindow': https://www.youtube.com !== http://miso.gostppro.com
Which I thought was an http vs https error, but after I refreshed the page with error went away and I saw a new warning:
Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture.
As pointed out in jkondratowicz's answer, this is a byproduct of mobile browsers disallowing autoplay on HTML5 videos. The only think I can think of is remove any JavaScript related to the player and the autoplay parameter and allow the user to manually start video playback when they're ready.
I was also getting mixed results results with adding an listener to the page load event which calls play() on the iframe:
function callback () {
document.querySelector('ytplayer').play();
}
window.addEventListener("load", callback, false);