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.

[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+'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.

[NathanielHill]

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