react-player: Failed to execute 'postMessage' on 'DOMWindow'

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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 17
Comments: 25 (4 by maintainers)

Most upvoted comments

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+'postMessage'+on+'DOMWindow'%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.

cookpete on Jan 15, 2019

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

NathanielHill on Oct 29, 2018

@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.

jaotors on Mar 13, 2019

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>

papuruth on Aug 20, 2020

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>

Parth909 on Nov 5, 2021

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?

carpben on Jan 15, 2019