Problem with YouTube API on iOS and Android

Question

There have been problems with the YouTube API in the last few days. The problem is that when embedding videos with the official API, it simply does not allow you to access the API. When you try to access the API, you get an error in the log (IOS), and if you try to play the video through the API, the video will go out. If you download it through the API, but you do not use the API, the user can play the video by clicking.

The problem persists in the following browsers:

IOS 7 Safari on iPad and iPhone iOS 7 Chrome on iPad and iPhone Android 4 Chrome

(My play button uses the API to play the video and create an error) JSfiddle: http://jsfiddle.net/frdd8nvr/6/

Error message:

Unable to post message to https://www.youtube.com. Recipient has origin http://fiddle.jshell.net. postMessage[native code]:0 Jwww-widgetapi.js:26:357 Nwww-widgetapi.js:25 (anonymous function)[native code]:0 html5player.js:1201:97 Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "http://jsfiddle.net". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match. 

Some debugging info:

As I can see, the API creates an iframe on the site. Src is once http and sometimes https.

http://www.youtube.com/embed/ZPy9VCovVME?enablejsapi=1&origin=http%3A%2F%2Ffiddle.jshell.net&autoplay=0&modestbranding=1&wmode=opaque&forceSSL=false

My test showed that in most cases, YouTube servers are simply LOCATION: https: // ... a request for https-url, but about 10% they served an HTTP request with relevant content.

I think the problem is with forced https, but I could not find a solution. Have you experienced the same thing? Do you have any solution to this problem? Is this a YouTube bug?

My test code is:

 <div id="myvideo"></div> <button id="play-button">Play</button> 

JS:

 var tag = document.createElement("script"); tag.src = "//www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); onYouTubeIframeAPIReady = function () { var vars = { enablejsapi: 1, origin: window.location.protocol + "//" + window.location.host, autoplay: 0, modestbranding: 1, wmode: "opaque", forceSSL: false }; if (+(navigator.platform.toUpperCase().indexOf('MAC') >= 0 && navigator.userAgent.search("Firefox") > -1)){ vars.html5 = 1; } var playerobj = new YT.Player('myvideo', { videoId: 'ZPy9VCovVME', wmode: 'opaque', playerVars: vars, events: { onReady: function(){ $('#play-button').on('click', function(){ playerobj.playVideo(); }); //playerobj.playVideo(); }, onStateChange: function(state){ switch(state.data){ case YT.PlayerState.PLAYING: break; //case YT.PlayerState.PAUSED: case YT.PlayerState.ENDED: break; } } } }); } 

Answer 1

Firstly, I think this is a duplicate of the following question: The YouTube IFrame API playback method does not work until it touches on some Android tablets

I could reproduce the same issue on the YouTube Player demo page .

Error

Unable to send message https://www.youtube.com . The recipient has a start at http://fiddle.jshell.net .

only happens on your jsfiddle. This error does not occur on the demo page, so your observed error does not seem to be related to the error registered in the console. I tested this with chrome on Android 4.4.4.

Bypass

I have a dirty workaround that works on chrome on Android 4.4.4 (Nexus5) and 4.1.2 (S2). I do not have an iOS device to test this. The workaround works on my phones because the video always starts the second time I press the play button.

http://jsfiddle.net/kjwpwpx8/6/

I can always start a video in click events after the playVideo function has been called once before. In my workaround, I put two frames on the page. One is hidden and the other is visible. If the page is viewed by a mobile browser, I call the playVideo function of the second video after OnReady-Event. The video will not play as the browser blocks this.

Now, when the play button is pressed, the first video becomes hidden and stops, and the second video becomes visible and the video playback function is played again.

Here is the important code:

 var playerOptions = { videoId: 'ZPy9VCovVME', wmode: 'opaque', playerVars: vars, events: {} }; var playerobj1 = new YT.Player('myvideo1', playerOptions); var playerobj2 = null; playerOptions.events.onReady = function(){ $('#play-button').on('click', function(){ $("#videowrapper .video1wrapper").hide(); playerobj1.stopVideo(); $("#videowrapper .video2wrapper").show(); playerobj2.playVideo(); }); if(isMobileBrowser) playerobj2.playVideo(); }; playerobj2 = new YT.Player('myvideo2', playerOptions);