Failed to execute 'postMessage' on 'DOMWindow': target/origin mismatch http vs https

Question

I apologize up front as I\'m very confused by my problem. I\'m really in a bind because this is causing a problem on my production site.

I have a javascript player o

Answer 1

I have read a bit about this, some SO posts here and there and this link too : https://code.google.com/p/gdata-issues/issues/detail?id=5788

I was about to add a comment to your question, saying I was getting crazy over this ... but when I started to describe my setup, I found a way to avoid the issue ^^.

I start with an empty div element, and use the Youtube Iframe API to turn it into an iframe with all the necessary options.

I have multiple divs like this one, and usually use the same JS variable to store all those players, but one at a time (one replaces the other, and so on ... - it could be better, I know).

To fix the issue, I had the idea to destroy the player with youtubePlayer.destroy(); before building a new one from another element. No more JS errors bleeding in my Chrome console :).

Hope it helps, all the litterature I could read about http and https did not apply to my case, because I am not setting the iframe URL myself, and my website happens to be not https ...

I did restore an async call instead of a static script tag in my HTML but I do not think this was necessary.

EDIT : this error message is quite misleading in fact, it only vaguely means : you are not using the youtube API the proper way :)