Failed to execute 'postMessage' on 'DOMWindow': https://www.youtube.com !== http://localhost:9000

JavascriptAngularjsYoutubeYoutube ApiYoutube Iframe-Api

Javascript Problem Overview

This is the error message that I get:

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

I've seen other similar problems where the target origin is http://www.youtube.com and the recipient origin is https://www.youtube.com, but none like mine where the target is https://www.youtube.com and the origin is http://localhost:9000.

  1. I don't get the problem. What is the problem?
  2. How can I fix it?

Javascript Solutions

Solution 1 - Javascript

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';

Solution 2 - Javascript

Just add the parameter "origin" with the URL of your site in the paramVars attribute of the player, like this:

this.player = new window['YT'].Player('player', {
    videoId: this.mediaid,
    width: '100%',
    playerVars: { 
        'autoplay': 1,
        'controls': 0,
        'autohide': 1,
        'wmode': 'opaque',
        'origin': 'http://localhost:8100' 
    },
}

Solution 3 - Javascript

Setting this seems to fix it:

  this$1.player = new YouTube.Player(this$1.elementId, {
    videoId: videoId,
    host: 'https://www.youtube.com',

Solution 4 - Javascript

You can save the JavaScript into local files:

Into the first file, player_api put this code:

if(!window.YT)var YT={loading:0,loaded:0};if(!window.YTConfig)var YTConfig={host:"https://www.youtube.com"};YT.loading||(YT.loading=1,function(){var o=[];YT.ready=function(n){YT.loaded?n():o.push(n)},window.onYTReady=function(){YT.loaded=1;for(var n=0;n<o.length;n++)try{o[n]()}catch(i){}},YT.setConfig=function(o){for(var n in o)o.hasOwnProperty(n)&&(YTConfig[n]=o[n])}}());

Into the second file, find the code: this.a.contentWindow.postMessage(a,b[c]);

and replace it with:

if(this._skiped){
	this.a.contentWindow.postMessage(a,b[c]); 
}
this._skiped = true;

Of course, you can concatenate into one file - will be more efficient. This is not a perfect solution, but it's works!

My Source : yt_api-concat

Solution 5 - Javascript

Make sure you are loading from a URL such as:

https://www.youtube.com/embed/HIbAz29L-FA?modestbranding=1&playsinline=0&showinfo=0&enablejsapi=1&origin=https%3A%2F%2Fintercoin.org&widgetid=1

Note the "origin" component, as well as "enablejsapi=1". The origin must match what your domain is, and then it will be whitelisted and work.

Solution 6 - Javascript

In my case this had to do with lazy loading the iframe. Removing the iframe HTML attribute loading="lazy" solved the problem for me.

Solution 7 - Javascript

I got the same error. My mistake was that the enablejsapi=1 parameter was not present in the iframe src.

Solution 8 - Javascript

Try using window.location.href for the url to match the window's origin.

Solution 9 - Javascript

There could be any of the following, but all of them lead into DOM not loaded before its accessed by the javascript.

So here is what you have to ensure before actually calling JS code:

  • Make sure the container has loaded before any javascript is called
  • Make sure the target URL is loaded in whatever container it has to

I came across the similar issue but on my local when I am trying to have my Javascript run well before onLoad of the main page which causes the error message. I have fixed it by simply waiting for whole page to load and then call the required function.

You could simply do this by adding a timeout function when page has loaded and call your onload event like:

window.onload = new function() { setTimeout(function() { // some onload event }, 10); }

that will ensure what you are trying will execute well after onLoad is trigger.

Solution 10 - Javascript

You also get this message when you do not specify a targetOrigin in calls to window.postMessage().

In this example we post a message to the first iFrame and use * as target, which should allow communication to any targetOrigin.

window.frames[0].postMessage({
                    message : "Hi there",
                    command :"hi-there-command",
                    data : "Some Data"
                }, '*')

Solution 11 - Javascript

In my instance at least this seems to be a harmless "not ready" condition that the API retries until it succeeds.

I get anywhere from two to nine of these (on my worst-case-tester, a 2009 FossilBook with 20 tabs open via cellular hotspot).... but then the video functions properly. Once it's running my postMessage-based calls to seekTo definitely work, haven't tested others.

Solution 12 - Javascript

It looks it's only a Chrome security system to block repeated requests, using CORB.

https://www.chromestatus.com/feature/5629709824032768

In my case, YouTube was blocking Access after the first load of the same webpage which has many video API data request, high payload.

For pages with low payload, the issue does not occur.

In Safari and other non Chronuim based browsers, the issue does not occur.

If I load the webpage in a new browser, the issue does not occur, when I reload the same page, the issue appears.

Solution 13 - Javascript

I think the description of the error is misleading and has originally to do with wrong usage of the player object.

I had the same issue when switching to new Videos in a Slider.

When simply using the player.destroy() function described here the problem is gone.

Solution 14 - Javascript

I had this same problem and it turns out it was because I had the Chrome extension "HTTPS Everywhere" running. Disabling the extension solved my problem.

Solution 15 - Javascript

This exact error was related to a content block by Youtube when "playbacked on certain sites or applications". More specifically by WMG (Warner Music Group).

The error message did however suggest that a https iframe import to a http site was the issue, which it wasn't in this case.

Solution 16 - Javascript

Remove DNS Prefetch will solve this issue.

If you're using WordPress, add this line in your theme's functions.php

remove_action( 'wp_head', 'wp_resource_hints', 2 );

Solution 17 - Javascript

You could change your iframe to be like this and add origin to be your current website. It resolves error on my browser.

<iframe class="test-testimonials-youtube-group"  type="text/html" width="100%" height="100%"
  src="http://www.youtube.com/embed/HiIsKeXN7qg?enablejsapi=1&origin=http://localhost:8000"
  frameborder="0">
</div>

ref: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Solution 18 - Javascript

In some cases (as one commenter mentioned) this might be caused if you are moving the player within DOM, like append or etc..

Solution 19 - Javascript

Just wishing to avoid the console error, I solved this using a similar approach to Artur's earlier answer, following these steps:

  1. Downloaded the YouTube Iframe API (from https://www.youtube.com/iframe_api) to a local yt-api.js file.
  2. Removed the code which inserted the www-widgetapi.js script.
  3. Downloaded the www-widgetapi.js script (from https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl7VfO1r/www-widgetapi.js) to a local www-widgetapi.js file.
  4. Replaced the targetOrigin argument in the postMessage call which was causing the error in the console, with a "*" (indicating no preference - see https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).
  5. Appended the modified www-widgetapi.js script to the end of the yt-api.js script.

This is not the greatest solution (patched local script to maintain, losing control of where messages are sent) but it solved my issue.

Please see the security warning about removing the targetOrigin URI stated here before using this solution - https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Patched yt-api.js example

Solution 20 - Javascript

Adding origin=${window.location.host} or "*" is not enough.

Add https:// before it and it will work.

Also, make sure that you are using an URL that can be embedded: take the video ID out and concatenate a string that has the YouTube video prefix and the video ID + embed definition.

Solution 21 - Javascript

This helped me (with Vue.js)

Found here vue-youtube

mounted() {
  window.YTConfig = {
    host: 'https://www.youtube.com/iframe_api'
  }
  const host = this.nocookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com'

  this.player = player(this.$el, {
    host,
    width: this.width,
    height: this.height,
    videoId: this.videoId,
    playerVars: this.playerVars
  })
  ...
}

UPDATE: Working like a charm like this:

...
youtube(
  video-id="your_video_code_here"
  nocookie
)
...
data() {
  return {
    playerVars: {
      origin: window.location.href,
    },
  };
},

Solution 22 - Javascript

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.

Solution 23 - Javascript

mine was:

<youtube-player
  [videoId]="'paxSz8UblDs'"
  [playerVars]="playerVars"
  [width]="291"
  [height]="194">
</youtube-player>

I just removed the line with playerVars, and it worked without errors on console.

Solution 24 - Javascript

You can try :

document.getElementById('your_id_iframe').contentWindow.postMessage('your_message', 'your_domain_iframe')

Solution 25 - Javascript

I was also facing the same issue then I visit official Youtube Iframe Api where i found this:

> The user's browser must support the HTML5 postMessage feature. Most modern browsers support postMessage

and wander to see that official page was also facing this issue. Just Visit official Youtube Iframe Api and see console logs. My Chrome version is 79.0.3945.88.

Categories
Recommended Javascript Solutions
Recommended Angularjs Solutions
Recommended Youtube Solutions
Recommended Youtube Api Solutions
Recommended Youtube Iframe-Api Solutions

Previous Solution:

Does a lambda expression create an object on the heap every time it's executed?

JavaLambdaJava 8

Next Solution:

What is the difference between Action Bar and newly introduced Toolbar?

AndroidAndroid ActionbarMaterial DesignAndroid Toolbar

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAdam ZernerView Question on Stackoverflow
Solution 1 - JavascriptChris FranklinView Answer on Stackoverflow
Solution 2 - JavascriptFlávioView Answer on Stackoverflow
Solution 3 - JavascriptM.Ali El-SayedView Answer on Stackoverflow
Solution 4 - JavascriptArturView Answer on Stackoverflow
Solution 5 - JavascriptGregory MagarshakView Answer on Stackoverflow
Solution 6 - JavascriptHokaschaView Answer on Stackoverflow
Solution 7 - JavascriptaveView Answer on Stackoverflow
Solution 8 - JavascriptChaitanya ShahView Answer on Stackoverflow
Solution 9 - JavascriptKMXView Answer on Stackoverflow
Solution 10 - JavascriptLukeSolarView Answer on Stackoverflow
Solution 11 - JavascriptRoger KruegerView Answer on Stackoverflow
Solution 12 - JavascriptMauView Answer on Stackoverflow
Solution 13 - JavascriptdennsView Answer on Stackoverflow
Solution 14 - JavascriptGavinView Answer on Stackoverflow
Solution 15 - JavascriptTomSjogrenView Answer on Stackoverflow
Solution 16 - JavascriptTerry LinView Answer on Stackoverflow
Solution 17 - Javascriptnhật tài nguyễnView Answer on Stackoverflow
Solution 18 - JavascriptT.ToduaView Answer on Stackoverflow
Solution 19 - JavascriptstuntbaboonView Answer on Stackoverflow
Solution 20 - Javascriptmatan yeminiView Answer on Stackoverflow
Solution 21 - JavascriptEugeneView Answer on Stackoverflow
Solution 22 - JavascriptHoangHieuView Answer on Stackoverflow
Solution 23 - JavascriptGabriel AlcântaraView Answer on Stackoverflow
Solution 24 - JavascriptHoaTruongView Answer on Stackoverflow
Solution 25 - JavascriptShahbaz ShoukatView Answer on Stackoverflow