How to resolve the 'Failed to execute 'postMessage' on 'DOMWindow'' error from a YouTube embed

Question

Using the YouTube JavaScript/iFrame API I'm trying to seek to different times of a video among other things.

I've stripped down a demo to this: http://jsbin.com/yuliponu

var player;
window.onYouTubeIframeAPIReady = function() {
  var iframe = document.createElement("iframe");
  iframe.width = 400;
  iframe.height = 300;
  iframe.id = "youtubeIframe";
  iframe.src = "https://www.youtube.com/embed/yta1WRuiupk?autoplay=1&enablejsapi=1&origin="+encodeURIComponent(window.location.protocol+"//"+document.domain)+"&playsinline=1&rel=0";
  iframe.setAttribute('frameborder', '0');
  iframe.setAttribute('allowFullScreen', '');
  document.getElementById("video").appendChild(iframe);

  player = new YT.Player('youtubeIframe');
};

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

If you take a look in the console you will see this error:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided
('https://www.youtube.com') does not match the recipient window's origin 
('http://jsbin.com').

I need this to resolve to start utilising the JavaScript API, but I'm not sure how to fix it.

UPDATE:

I've since restarted my computer, and the error does not occur. I will update if I see the error again.

Answer 1

The problem is that you are testing on a site transferred using plain HTTP but you requested youtube's API in SSL version. I do think that Google has fixed this in their Youtube IFrame API JS but it would be most elegant to use:

tag.src = "//www.youtube.com/iframe_api";

instead of

tag.src = "https://www.youtube.com/iframe_api";

Automatically selecting the same protocol as the parent.