Failed to execute 'postMessage' on 'DOMWindow'

[Tresky]

I last worked on my project about a month ago. At that time, I was able to get Youtube videos to load and play properly in react-player. After coming back, I've discovered that something seems to have changed and now the video won't load. I end with the following error:

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

I've looked up some StackOverflow questions about it and I've read that it's an error coming from the Youtube iFrame API when you make a request for a Youtube video over http instead of https. I put some logging in the react-player library and saw that the requests are supposedly being made over https, so I don't think that's the issue I'm having here.

Does anyone have any insight into this?

As an aside, I'm using Gatsby as my platform. Not sure if this really matters.

[NathanielHill]

I'm getting the same warning although the videos work, did you resolve it?

[lloydh]

@Tresky I'm getting this too. Any tips on a fix?

[Tresky]

@NathanielHill @lloydh Hey guys. Whenever I was working on this, I discovered that I get the error mentioned above, but the player still functions properly. I never found a solution to stop this error from appearing.

[carpben]

I'm getting this error too.
@cookpete , Are you aware of this issue?
@Tresky , you closed the issue, even though it's relevant and hasn't been resolved. Do you mind reopening it?

[Tresky]

I've reopened this issue because it seems to be a common problem experienced by many people. Hopefully, we can find a solution here.

Does the issue happen only on page load? Do all postMessage events function properly after the initial page load? It could be that events are trying to be posted to the hidden iframe before it gets loaded fully.

[cookpete]

I'm aware of the issue, but afaik it's a problem with with the Youtube iFrame API based on whatever URL you are calling the API from, and it's not very consistent. This issue should remain closed unless there is a specific problem that ReactPlayer is causing.

There are plenty of mentions of the error elsewhere: https://www.google.com/search?q=youtube+iframe+Failed+to+execute+%27postMessage%27+on+%27DOMWindow%27%3A

However, ReactPlayer already tries to implement the solutions posted, eg adding the origin property to the playerVars. Also note this commit that pinned the API URL to https to try and prevent this issue.

If the error is still occurring (and not consistently) then I'm not sure what else can be done in this library.

[NathanielHill]

This happens consistently on initial load for me. Is there another embedding technique? Having console errors lowers Lighthouse score which effects Google ranking.

[petrogad]

Found something similar with Safari (on full screen) using vimeo. Getting a blocked a frame with origin error that I'm guessing is being thrown by postMessage.

It only happens in full screen though so I'm not entirely certain what to do.

[jaotors]

is there a way to fix this? what is the current progress of the investigation for this?

[cookpete]

There is no investigation happening, unless someone else wants to try and figure it out. My previous comment pretty much sums it up. If it's a problem with the Youtube and Vimeo players, this issue should be closed as there is nothing to fix in this library. However, I'm happy to leave it open for the time being for visibility, in case anyone wants to find out more.

[jaotors]

@cookpete got it thanks.

So I found something interesting, upon using the yt-player library, well its the same implementation on this, but only on youtube, the player loads and its working, I think it loads upon re-rendering because I got this error.
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost:3000').

here is the code that i did on my project.
the videoId here is the videoId of the youtube and the on var is just for changing the tab.
btw what i do in here is that when you change the tab you just pause the current video.

https://gist.github.com/jaotors/c5fba976d04f72844b8402490fbcdd39

I hope this will help.

[papuruth]

But if I'm embedding video like this there is no such error

<iframe 
   width="560" 
   height="315" 
   src="https://www.youtube.com/embed/D6RtJLpdUgI"
   frameborder="0" 
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
   allowfullscreen>
</iframe>

[Zhukreal]

so, any solution here ?

[mixa9269]

Any solutions?

[ronaklalwaniii]

Any update?

[rtxvedant]

help same issue ???

[linuz90]

Also having this same issue, but oddly enough only on Android. It works perfectly on Chrome and Safari for Mac, and on iOS.

[phivh]

I tried some cases and fixed with this temp solution:
<ReactPlayer url={url} config={{ youtube: { playerVars: { origin: 'https://www.youtube.com' } } }}/>

[HectorLS]

Im still having this issue with the last version.

Somehow @phivh config reduces the issue and now appears with less frencuency, but the bug its still happening

I tried some cases and fix with this temp solution:
<ReactPlayer url={url} config={{ youtube: { playerVars: { origin: 'https://www.youtube.com' } } }}/>

if someone finds out any workaround for a full fix, will be much appreciated if share here.
Also i think this issue should be reopen.

[khvnkay]

Any update?

[SebSnr]

Any update ? Search since few hours but find no answer

Add this to my HTML, reduce errors count but not fix
<script src="https://www.youtube.com/iframe_api"></script>
try but not fix
<ReactPlayer url={url} config={{ youtube: { playerVars: { origin: 'https://www.youtube.com' } } }}/>

[Parth909]

The solution for this is to embed the url. This won't throw any errors

let video = "https://www.youtube.com/watch?v=AK-MUzWdpjU";
<iframe
   className="w-auto sm:w-[80%] h-60 sm:h-80 sm:mx-4 sm:mb-4"
   src={
      video.includes("/watch?v=")
         ? video.replace("/watch?v=", "/embed/")
         : video
   }
   frameBorder="0"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
   allowFullScreen
></iframe>

[ujnimz]

Still facing this in 2022. Any fix?

[jslmariano]

+1

[cookpete]

I'm going to lock this issue because nothing useful is being added to the discussion. I am aware that the problem still happens. It sucks. But no-one is giving any more information on how to reproduce/debug/solve it.

If you really want this fixed, please read through the many StackOverflow threads about this error, and open a new issue with either a clear suggestion about what this library can do to fix the problem, or a clear way of reproducing the problem.