Youtube iframe API fails to post message

Question

For awhile now, a piece of javascript I wrote which listens to youtube actions on a certain page worked wonderfully. I am using Youtube's iframe js api: https://developers.google.com/youtube/iframe_api_reference . But one recent content addition, a specific youtube video, the tracking wouldn't work. The events won't fire at all.

In the console, I noticed this post message error: Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.

So nothing with my own code helped. Some questions here on stackoverflow suggested this is an issue with initiating new YT.player too soon, so I tried a whole bunch of things like loading the yt js api file on window load and only apply the api after, but that didn't seem to do any good either.

Answer 1

I know this post is 3 years old, but for those who are still searching for an answer:

Add this script and everything works fine:

<script src="https://www.youtube.com/iframe_api"></script>

I've had the same problem with jwplayer and fixed it with that script.

Answer 2

It took me over an hour, but the answer was right in front of me. It's actually pretty self explained: You cannot use youtube's js api to track an iframe video without www. I don't know why, it certainly does not say so in their documentation.

I tested this a few times and confirmed, as of now, tracking an iframe with the source www.youtube.com/embed/0GN2kpBoFs4 would work wonderfully while tracking youtube.com/embed/0GN2kpBoFs4 will throw:

Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.

The confusing part of course is that both the video load and play fine. It's only the API which is not working properly.

fiddle - http://jsfiddle.net/8tkgW/ (Tested on chrome / mountain lion)

Btw, while writing this answer I came across YouTube iframe API: how do I control a iframe player that's already in the HTML? - notice this guy's fiddle. He wrote his own youtube iframe implementation (wow!). If you change the iframe source address in the fiddle to one without www, it will work. This only means youtube writes bad js. Bad bad bad!

Answer 3

Don't forget to add it to the whitelist:

<!-- Add the whitelist plugin -->
<plugin name="cordova-plugin-whitelist" source="npm" spec="*"/>

<!-- White list https access to Youtube -->
<allow-navigation href="https://*youtube.com/*"/>

Answer 4

The youtube api documentation recommend to load the api like this

var tag = document.createElement('script');
tag.src = "http://youtube.com/iframe_api";
tag.id = "youtubeScript";
var firstScriptTag = document.getElementsByTagName('script')[1];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

But getting this error: Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com

Here is the best solution I found from [a now-dead site]:

So add this first at the top before calling the Api

if (!window['YT']) {var YT = {loading: 0,loaded: 0};}
if (!window['YTConfig']) {var YTConfig = {'host': 'http://www.youtube.com'};}
if (!YT.loading) {YT.loading = 1;(function(){var l = [];YT.ready = function(f) {if (YT.loaded) {f();} 
else 
{l.push(f);}};
window.onYTReady = function() {YT.loaded = 1;for (var i = 0; i < l.length; i++) {try {l[i]();} catch (e) {}}};
YT.setConfig = function(c) {for (var k in c) {if (c.hasOwnProperty(k)) {YTConfig[k] = c[k];}}};
var a = document.createElement('script');
a.type = 'text/javascript';
a.id = 'www-widgetapi-script';
a.src = 'https:' + '//s.ytimg.com/yts/jsbin/www-widgetapi-vflumC9r0/www-widgetapi.js';
a.async = true;
var b = document.getElementsByTagName('script')[0];
b.parentNode.insertBefore(a, b);})();}

//===========THEN=============================

function onYouTubeIframeAPIReady () {// do stuff here}