Failed to execute 'postMessage' on 'DOMWindow'

[DanielHudson]

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

When logged into youtube the protocol is usually automatically redirected to HTTPS. This causes the above error when embedding a videojs-youtube video on an HTTP site.

[DanielHudson]

I forgot to add 'when using Chrome' to the above.

[Florian95]

Some here.

More informations here : https://code.google.com/p/gdata-issues/issues/detail?id=5788

[eXon]

Fixed with forceSSL, see #68

[deweydb]

I am still having this issue with the latest build, are you sure it's fixed?

[eXon]

@deweydb can you please give more details on how to reproduce

[apptv]

I can confirm this issue.

It happens when you are logged in into your google account (gmail).
And you must login to google first and then open the iFrame.

[wegorich]

The issue is still there... It happened magically have two project, same code base, one with this issue. Other not :(

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

Is there an approach to avoid it?

[pietrovismara]

+1

[CavalcanteLeo]

+1

[NathanSweet]

This is still occurring. The YouTube JS seems to be trying to communicate back to the host window inside a try. Some browsers (FF) log a message while others don't (Chrome). It could be the message is harmless.

[mpetkov]

Anyone know of when this will be fixed?

[sanketj14]

it's replicable on chrome as well at my end. I think this is because you're forcing the iframe_api to load over https. In @wegorich case, you can clearly see that he's requesting api over http. I just removed the https loadScript('https://www.youtube.com/iframe_api', apiLoaded); from the video-youtube.js, and it started working for me.
let me know if it works for anyone else, so can submit PR.

[claudio-incomedia]

I'm facing the very same issue. It seems that this bug just came back after an update oj videojs-youtube.

[kleninb]

Same here, I get repeat console error of this

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

yt_api.js:95 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://youtube.com') does not match the recipient window's origin ('https://trill.cards').

[kleninb]

My problem with youtube video is, when I play one video close it before I open another video,
both of them are playing one in the background and one live.
But In localhost (system) it is working fine.

[kellsbells]

+1

[edernucci]

+1

[hrehman200]

+1

[gkatsev]

Please, just posting +1 is not helpful. I am unable to reproduce it locally and the only example that's posted is using just the youtube API and not videojs-youtube. Any guidance that can be provided for reproducing it (or even just solving it) would be good. Preferably, with a reduced test case.

Thanks.

[iCoderXXI]

Hi all! I've got the same issue in both chromium-browser and firefox under ubuntu 16.04 on https://developers.facebook.com/graph-academy/marketing-api/1/. "Login with Facebook" button is not working, getting several messages like "login-ads.php:50 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://developers.intern.facebook.com') does not match the recipient window's origin ('https://developers.facebook.com')" in console...

[manjudr]

I am also facing same issue here

[codechikbhoka]

@manjudr were you able to solve it ? I am also facing the same problem

[manjudr]

@codechikbhoka Still that is not fixed yet somehow video is working but we were getting those errors in the console still.

[wuzinong]

Does anyone can provide a way to catch this error ?

[AdamSalma]

+1

[judevcoder]

I met same error.

Issue is like this "www-widgetapi.js:116 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://js.driftt.com')"

And javascript code is

<script> !function() { var t; if (t = window.driftt = window.drift = window.driftt || [], !t.init) return t.invoked ? void (window.console && console.error && console.error("Drift snippet included twice.")) : (t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ], t.factory = function(e) { return function() { var n; return n = Array.prototype.slice.call(arguments), n.unshift(e), t.push(n), t; }; }, t.methods.forEach(function(e) { t[e] = t.factory(e); }), t.load = function(t) { var e, n, o, i; e = 3e5, i = Math.ceil(new Date() / e) * e, o = document.createElement("script"), o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + i + "/" + t + ".js", n = document.getElementsByTagName("script")[0], n.parentNode.insertBefore(o, n); }); }(); drift.SNIPPET_VERSION = '0.3.1'; drift.load('pn4kvs3b3x4i'); </script>

How can I solve this issue?

[codeofsumit]

same here 🤔

[krishaamer]

Still having this issue in 2018 ;/

[radiolondra]

Confirmed. I have the same issue. So the issue is still there after years. Noone is able to fix this? :/

[Adetona]

Having this issue as well.

[manjudr]

Why this issue is closed ? Many of user are facing this issue still

[gkatsev]

So, I finally took some time to investigate this and was able to reproduce after super carefully re-reading the original post, in my previous reading I didn't catch the nuance in the issue. However, a live test case would've helped this get reproduced a lot earlier, which is why it was still closed until now.

This was actually fixed in a really old version via the forceSSL option in #68 but during some refactor it was taken out. To solve this, we'd basically want to re-write the youtube url to always, or optionally, be https. Not having an option is probably best but I'm slightly worried that always using https could somehow cause issues somewhere. If anyone has thoughts, let me know. Or feel free to submit PR to fix this :), happy to give pointers on it until I can fix it myself. Drop by on our slack.

[tjaneczko]

@gkatsev I took a deeper look into this, it seems like it might be a timing issue with the YouTube IFrame API. The IFrame API already loads everything over https, so implementing #68 again would offer no benefits, and actually loses us the benefit of having the IFrame API do all of the lifting for creating the iframe. It looks like initially two messages are sent, the first one gets rejected due to the iframe not being initialized completely (it looks like): {"event":"listening","id":1,"channel":"widget"}. They have a try / catch in the YouTube API, but according to the HTML5 spec for postMessage, browsers should silently fail postMessages where the origins don't match up, meaning the catch block is never hit. Unfortunately, it looks like there's no suitable way for us to fix this without Google doing something on their end to fix the postMessage timing.

[tjaneczko]

On the plus side it looks like this error only happens on the first event, and doesn't impact video playback at all, so it's unfortunately just a benign error message that pops up.

[gkatsev]

Thanks for looking @tjaneczko. Seems like the issue currently isn't related to the original issue here. I think I got confused because I wasn't getting the error when the source was https but was getting it when it was http but the following day I was getting it for both sources. In addition, the new error isn't coming from us but from youtube's script. As @tjaneczko said, I don't notice this error impeding playback. I am also not seeing any errors logged in Firefox, probably because of the spec guidance of ignoring these types of errors. We potentially should open an issue against chrome so they won't show these errors.

[harrybest]

Wanted to share my experience here as it was resolved after few steps

1. convert the protocol of domain with https
2. and on youtube api function: onPlayerReady(event) add the mute function which is event.target.playVideo(); and it resolved the issue on mobile devices and also work each time.

Hope it help for you as well.

[yourchoice]

I have similar problem with video.js@7.7.5 and youtube plugin v2.6.1

[yourchoice]

For my case I think I resolved the problem with these options (i think i need just 'origin'):

{ ... , "youtube": { "iv_load_policy": 1, "origin": "{$SETTINGS.url}" } }

Sorry seems doesn't work...

[gilisegal]

@yourchoice have you managed to solve this with video.js and youtube plugin?

[etomProductions]

Hello,

Did anyone fix this issue please?

Thank you

[harrybest]

Hello,

Did anyone fix this issue please?

Thank you

This error occur due to different reasons means there are different solutions but here are two things you can try and hope it will fix the issue:

1. try using SSL
2. Set the default load function to mute as some browser not supported autoplay video with voice so you have to make video muted by default.

[kevnk]

This comment from YouTube API Issue Tracker solved it for me.

TL;DR: Remove rel=0 from your iframe's query params

[chiragdpbytes]

Having this issue as well.
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('website.domain').

[WartVader]

I had that issue too. Fixed it simply adding enablejsapi (also set it first in playerVars) and origin
Changed it from this:

playerVars: {
    loop: 1,
    playlist: link
}

To this:

playerVars: {
    enablejsapi: 1,
    origin: window.location.origin,
    loop: 1,
    playlist: link
},

Seems like order is important, because it build query link by the order in playerVars