Failed to execute 'postMessage' on 'DOMWindow': https://www.youtube.com !== http://localhost:9000
I believe this is an issue with the target origin being https
. I suspect it is because your iFrame url is using http
instead of https
. Try changing the url of the file you are trying to embed to be https
.
For instance:
'//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
to be:
'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
Youtube API - Failed to execute 'postMessage' on 'DOMWindow'
I think that the error message is a little bit misleading, as it has nothing to do with your actual host, but is more about how resources from youtube.com are referenced on the page.
There are two things I would suggest in order to get rid of this error message. (At least these were working in my case.)
First and foremost you should reference the IFrame Player API
script via https
. When called with http, YouTube redirects that script request automatically to it’s https counterpart, so if you reference the script directly from https, that eliminates this extra redirect. But most importantly, in case your production environment ever goes to https, it won’t load that script over http, but will throw a “Blocked loading mixed active content” error.
According to my tests this change alone would already magically solve the issue. However in case you would prefer to leave that on http, there is this other thing:
Reading through the Loading a Video Player and the Supported Parameters sections of the API docs, there is no mention about the host
parameter at all. In fact when I removed that line from the Player parameters I didn't receive the error message any more. Also, interestingly, when I set host
literally to http://www.example.com
, the error message reads: The target origin provided (‘http://www.example.com’) does not match the recipient window’s origin …
.) Therefore I think the host
parameter should not be set by the client.
Sidenote: If you have a look at the contents of https://www.youtube.com/player_api
, you will see this statement: var YTConfig = {'host': 'http://www.youtube.com'};
. To me it means that http://www.youtube.com
is some kind of a default for host
anyways, so even if you go and set it in the client code, you could try to set it to https://www.youtube.com
.
Long story short, try to use <script src="https://www.youtube.com/player_api"></script>
and comment out the host
. This is my 2 cents.
Youtube API error - Failed to execute 'postMessage' on 'DOMWindow':
Wow, strange error, "visibility = hidden" is a reason.
Be sure that the playback container (like its parents) is displayed before starting the player.
YouTube iFrame Player API failed to execute postMessage on DOMWindow
Try using loadVideoById
This function loads and plays the specified video.
- The required
videoId
parameter specifies the YouTube Video ID of the video to be played. In the YouTube Data API, avideo
resource'sid
property specifies the ID.- The optional
startSeconds
parameter accepts a float/integer. If it is specified, then the video will start from the closest keyframe to the specified time.- The optional
endSeconds
parameter accepts a float/integer. If it is specified, then the video will stop playing at the specified time.- The optional
suggestedQuality
parameter specifies the suggested playback quality for the video. Please see the definition of thesetPlaybackQuality
function for more information about playback quality.
Here is a snippet to help you
JS
function searchVideo(){
var vID = document.getElementById("vidID").value
player.loadVideoById(vID, 0, "default");
}
HTML
Search by Video ID: <input type="text" id="vidID" name="vidID"><button onclick="searchVideo()">Search</button>
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided does not match the recipient window's origin ('null')
Make sure the target window that you (or Facebook) is posting a message to, has completed loading. Most of the times I've gotten this error were when an iframe I was sending messages to had failed to load.
Related Topics
Typescript - Possible to Disable Type Checking
Regex for Mobile Number With or Without Country Code
Change Name of Uploaded File on Client
How to Build Pdf File from Binary String Returned from a Web-Service Using JavaScript
Why Does JavaScript Map Function Return Undefined
Uploading a File from a Bootstrap Modal Using Ajax
Uncaught Typeerror: (Intermediate Value)(...) Is Not a Function
Adding Whitespace to a String in Typescript (In Angular)
Increase and Decrease Number With JavaScript and Two Buttons Up and Down
How to Reset Child Elements' State
How to Detect If Two Divs Are Touching/ Collision Detection
Electron, After Browserify, Fs.Existssync Is Not a Function
Detect If Html5 Video Element Is Playing
How to Iterate Using Ngfor Loop Map Containing Key as String and Values as Map Iteration
How to Make a Triangle Using for Loop JavaScript