Using the YouTube Iframe API I get the following error in Safary 9.1, OS X Yosemite.

Unable to post message to . Recipient has origin

The page does work in other browsers (e.g. Firefox, Chrome etc). Also, it turns out that it's broken only on one specific machine. It does work on another machine running same OS and browser.

I have no idea where to start debugging this.

The iframe HTML code generated looks like this:

<iframe id="myVideo" frameborder="0" allowfullscreen="1" title="YouTube video player" width="200" height="200" src="/?html5=1&amp;showinfo=0&amp;autoplay=0&amp;rel=0&amp;controls=1&amp;playsinline=1&amp;enablejsapi=1&amp;origin=http%3A%2F%2Fwww.example"></iframe>

The JavaScript code is this:

...
vid_frame = new YT.Player(id, {
    height: '200',
    width: '200',
    videoId: id,
    playerVars: {
       html5: 1,
       showinfo: showVideoInfo,
       autoplay: 0,
       rel: showRelatedVideos,
       controls: showPlayerControls,
       playsinline: 1
    },
    events: {
        onReady: onPlayerReady
    }
});

I feel like there is a browser setting that blocks the munication between the website and YouTube API but the error simply says that is trying to send something to (instead of https).

I tried to manually change the http into https (in the iframe urls), but then I get warnings saying:

Untrusted origin:

(because the main website is server over http)

How to fix this?

I did see this related question: Unable to post message to . Recipient has origin

Where to start debugging this?

Using the YouTube Iframe API I get the following error in Safary 9.1, OS X Yosemite.

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

The page does work in other browsers (e.g. Firefox, Chrome etc). Also, it turns out that it's broken only on one specific machine. It does work on another machine running same OS and browser.

I have no idea where to start debugging this.

The iframe HTML code generated looks like this:

<iframe id="myVideo" frameborder="0" allowfullscreen="1" title="YouTube video player" width="200" height="200" src="http://www.youtube./embed/?html5=1&amp;showinfo=0&amp;autoplay=0&amp;rel=0&amp;controls=1&amp;playsinline=1&amp;enablejsapi=1&amp;origin=http%3A%2F%2Fwww.example."></iframe>

The JavaScript code is this:

...
vid_frame = new YT.Player(id, {
    height: '200',
    width: '200',
    videoId: id,
    playerVars: {
       html5: 1,
       showinfo: showVideoInfo,
       autoplay: 0,
       rel: showRelatedVideos,
       controls: showPlayerControls,
       playsinline: 1
    },
    events: {
        onReady: onPlayerReady
    }
});

I feel like there is a browser setting that blocks the munication between the website and YouTube API but the error simply says that https://www.youtube. is trying to send something to http://www.youtube. (instead of https).

I tried to manually change the http into https (in the iframe urls), but then I get warnings saying:

Untrusted origin: http://example.

(because the main website is server over http)

How to fix this?

I did see this related question: Unable to post message to http://www.youtube.. Recipient has origin https://www.youtube.

Where to start debugging this?

• javascript
• iframe
• youtube
• safari
• youtube-iframe-api

2 Answers 2

Do not load the YouTube Iframe API using the <script src='path/to/iframe_api'></script> tag, but use the way they remend in the documentation:

This code loads the IFrame Player API code asynchronously.

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

In fact, create the script tag from the JavaScript side, don't put it directly in the HTML (e.g. <script src="..."></script>).

Just change the <embed> URL to https://:

<iframe id="myVideo" frameborder="0" allowfullscreen="1" title="YouTube video player"
        width="200" height="200" src="https://www.youtube./embed/?html5=1&amp;showinfo=0&amp;autoplay=0&amp;rel=0&amp;controls=1&amp;playsinline=1&amp;enablejsapi=1&amp;origin=http%3A%2F%2Fwww.example."></iframe>
<!----------------------------------------^

The reason being, loading https:// content over http:// is okay, but no the other way round. And finally, if that doesn't work, you can any time use CloudFlare's free SSL proxy.