Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>')

Question

I'm getting this error: Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').

My page operates as I'd hoped (I don't notice any unwanted behavior), but I never like ignoring errors in my console, especially if I don't even understand the root cause.

My question is NOT A DUPLICATE because I've already studied all of these questions but none of the answers worked:

• Failed to execute 'postMessage' on 'DOMWindow': https://www.youtube.com !== http://localhost:9000
• Failed to execute 'postMessage' on 'DOMWindow': The target origin provided does not match the recipient window's origin ('null')
• Youtube API - Failed to execute 'postMessage' on 'DOMWindow'
• YouTube API and cross origin requests
• YouTube iFrame Player API failed to execute postMessage on DOMWindow
• Failed to execute 'postMessage' on 'DOMWindow': target/origin mismatch http vs https

I'm already using https.

I've already tried setting playerVars to {origin: window.location.origin}.

I've already tried setting host.

I've already tried changing the visibility of the iframe.

And so on.

var playerVars = {origin: window.location.origin};//https://mcmap.net/q/115891/-failed-to-execute-39-postmessage-39-on-39-domwindow-39-https-www-youtube-com-http-localhost-9000
window.onYouTubeIframeAPIReady = function () {
    for (var i = 0; i < youtube.length; i++) {
        var youtubeLazyEl = youtube[i];
        var videoId = youtubeLazyEl.dataset.v;
        players[videoId] = new YT.Player(videoId, {
            videoId: videoId,
            //host: 'https://www.youtube.com', //https://mcmap.net/q/120790/-youtube-api-failed-to-execute-39-postmessage-39-on-39-domwindow-39
            //playerVars: playerVars,
        });
    }
};

Ideas?

Bettiebettina

Did you find a solution? I'm still experiencing this error after trying all the solutions suggested in the other threads. – Chkalov

@Chkalov Unfortunately no. If you ever find one, please post here! – Bettiebettina

Four years later and still no solution for this! I wonder if Google's AI can find a fix for it! ;) – Poteen

Answer 1

As you seem to be using lazy loading, try removing the iframes HTML attribut loading="lazy" - that solved the issue for me.

Feininger

Answer 2

TLDR; not really an answer, but may possibly assist the google engineers in tracking down this issue.

I have noticed the issue only surfaces for me when creating more than one player.

I've a page that creates multiple players to populate a scroll view.

I noticed I was getting one less error message than there were players created, so added a switch that forces the page to only create one player then ignore all other requests.

custom switch code: permalink

 createOnePlayerOnly = location.search.indexOf('oneplayer')>=0 ? true : false,  

this causes a single player to load fine, with no errors (there are other errorsrelated to a chromecast extension no longer shipped with chrome, which are unrelated AFAIK)

each player is always created via the same code which always sets the origin and widget

    playerVars: info.playerVars || {
      fs: 1,
      controls: 0,
      playsinline: 0,
      enablejsapi: 0,
      modestbranding: 1,
      disablekb: 1,
      autohide: 1,
      autoplay: 0,
      loop: 0,
      volume: 0,
      iv_load_policy: 3,
      origin: location.href,
      widget_referrer : location.href
    }
  

So it's possible that the iframe code doesn't pick up the origin value from the options correctly when additional players are made. not sure why that might be, but it might be to do with caching, or scoping issues.

Ravelin

i have also noticed that setting enablejsapi to 1 can cause the error to occur, however leaving it at 0 doesn't seem to prevent the javascript api from working, hence i have left it at 0. this might also give the google engineers some clues as to what is going on. – Ravelin

Answer 3

I think we could customize the sendMessage of the YT.Player

playerOptions.playerVars.origin = window.location.origin or your domain.
this.youtubePlayer = new YT.Player(element,playerOptions);
this.youtubePlayer.sendMessage = function (a) {
   a.id = this.id, a.channel = "widget", a = JSON.stringify(a);
   var url = new URL(this.h.src), origin = url.searchParams.get("origin");
   if (origin && this.h.contentWindow) {
       this.h.contentWindow.postMessage(a, origin)
   }
}

I used this function to resolve in my project.

My Origin answer

Eppie