8

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:

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://stackoverflow.com/a/50518247/470749
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://stackoverflow.com/a/47914456/470749
            //playerVars: playerVars,
        });
    }
};

Ideas?

Ryan
  • 22,332
  • 31
  • 176
  • 357

3 Answers3

0

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

Hokascha
  • 1,709
  • 1
  • 23
  • 41
0

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.

unsynchronized
  • 4,828
  • 2
  • 31
  • 43
  • 1
    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. – unsynchronized Feb 26 '21 at 02:49
0

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

HoangHieu
  • 2,802
  • 3
  • 28
  • 44