Youtube iframe API unclear 'postMessage' on 'DOMWindow' origin issue

Question

I have the following functional youtube iframe.

<iframe width="100%" height="100%" 
        src="//youtube.com/embed/93HWMspjxqI?autoplay=0&origin=http://site.dev&enablejsapi=1" 
        frameborder="0" id="video-93HWMspjxqI">
</iframe>

I want to bind to a video close event. This seems to be determined by onStateChange event from the youtube iframe_api.

Reading the docs, I found out how to wrap a player object on top of an existing iframe by doing this:

var player = new YT.Player("video-"+youtubeParser.getYouTubeIdFromUrl(videoUrl), {
    events : {
        onStateChange    : function () {
            console.log("state change");
         }
    }
});

Inspecting the console, I see that my video object is created correctly.

However, I am getting insane numbers of errors with the following message:

I tried adding the following parameters in my player initialization:

 var player = new YT.Player("video-"+videoUrl, {
      playerVars : {
           origin : window.location.protocol + "//"+window.location.host,
           enablejsapi : 1
      },
      events : {
           onStateChange : function () {
               console.log("state change");
           }
      }
 });

This still doesn't work. The same origin error shows up. Why? It doesn't seem to be a local hosting problem. I isolated the problem in this jsfiddle code : http://jsfiddle.net/srrbqfnm/1/