www-widgetapi.js:115 Failed to execute 'postMessage' on 'DOMWindow

[Benoit1980]

Hello,

I have been using your plugin and keep getting this error in the chrome console.

www-widgetapi.js:115 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://mysite.com').

Maybe this link can help you fix the issue in your code:
https://stackoverflow.com/questions/27573017/failed-to-execute-postmessage-on-domwindow-https-www-youtube-com-http

I am using the version 1.3.5

Thank you.

[chemic]

Also www-widgetapi.js:108

Error while parsing the 'allow' attribute: 'accelerometer;', 'autoplay;', 'encrypted-media;', 'gyroscope;', 'picture-in-picture' are invalid feature names.

[miteyema]

@freddycrugger I am having the same problem. I have looked at your link on SO, but neither the http/https solution nor the origin solution could solve the problem for me. To what solution are you referring?

[edopenni]

I have the same issue, both locally (in http://localhost:3000) and remotely (https site.) I am using the origin parameter, but it doesn't make any change. Has anyone fixed this issue?

[bioudi]

i have the same issue locally and on the server using https

[nadavjulius]

sameeee dang

[everyx]

same +1

[Benoit1980]

Try this if it works for you:
https://stackoverflow.com/questions/27573017/failed-to-execute-postmessage-on-domwindow-https-www-youtube-com-http

[adrianogiannacco]

Same issue, locally and in production with HTTPS.
Has anyone found a workaround?

[Benoit1980]

Same issue, locally and in production with HTTPS. Has anyone found a workaround?

This fixed my issue: https://stackoverflow.com/a/27574013 .
My target URL was not https but HTTP

You could also try this:
https://stackoverflow.com/a/54396524

[pedro-pinho]

This fixed my issue: https://stackoverflow.com/a/27574013 . My target URL was not https but HTTP

You could also try this: https://stackoverflow.com/a/54396524

I tried both of these and it didn't work for me. Issue still happens both locally and in production.
Debugging the minified file, I found that it always tries to execute this piece of code:

window.postMessage('{"event":"listening","id":1,"channel":"widget"}', 'https://www.youtube.com')

Which will always throw an error unless you paste this on a youtube window.

[Benoit1980]

This fixed my issue: https://stackoverflow.com/a/27574013 . My target URL was not https but HTTP
You could also try this: https://stackoverflow.com/a/54396524

I tried both of these and it didn't work for me. Issue still happens both locally and in production. Debugging the minified file, I found that it always tries to execute this piece of code:

window.postMessage('{"event":"listening","id":1,"channel":"widget"}', 'https://www.youtube.com')

Which will always throw an error unless you paste this on a youtube window.

Can you try to post your origin url with the POST?
eg:

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

So your minified code end up with something like this:

'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:8100';

Obviously, you will need to adapt your code with the above idea. But I am wondering if passing the origin website URL will help you.

If you check their bottom example, the origin is passed in the URL:
https://developers.google.com/youtube/iframe_api_reference

[pedro-pinho]

Thank you for your reply

Yes, I'm sending the origin with the playerVars, like this

playerVars: { rel: 0, origin: window.location.origin, },

My iFrame src attribute looks like this

https://www.youtube.com/embed/VIDEOID?rel=0&origin=http%3A%2F%2Flocalhost%3A3000&enablejsapi=1&widgetid=1

Unfortunately the error persists:

www-widgetapi.js:984 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').

[Benoit1980]

Thank you for your reply

Yes, I'm sending the origin with the playerVars, like this

playerVars: { rel: 0, origin: window.location.origin, },

My iFrame src attribute looks like this

https://www.youtube.com/embed/VIDEOID?rel=0&origin=http%3A%2F%2Flocalhost%3A3000&enablejsapi=1&widgetid=1

Unfortunately the error persists:

www-widgetapi.js:984 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').

Could you try this instead?
origin: location.hostname

[Benoit1980]

Make sure your VIDEOID is correct.

https://www.youtube.com/embed/VIDEOID?rel=0&origin=http%3A%2F%2Flocalhost%3A3000&enablejsapi=1&widgetid=1

As

"'https://www.youtube.com/embed/' + VIDEOID + '?rel=0&origin=http%3A%2F%2Flocalhost%3A3000&enablejsapi=1&widgetid=1'"

Can you also try to remove "&widgetid=1" aswell please as I think this is extra which is not part of the Youtube API.

Thanks

[pedro-pinho]

The VIDEOID is correct, as it is working on the page.
After trying origin: location.hostname on playerVars, my iframe src looks like this.

https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&origin=http%3A%2F%2Flocalhost%3A3000&enablejsapi=1&widgetid=1

But the console error persists. It is an annoyance tbh, as everything works fine, but I'm trying to get rid of this console error.

I'm not being able to pinpoint who's adding this widgetid=1 attribute, I'm using [email protected] and [email protected]

[Benoit1980]

It looks like this vue package is kind of old.
From what I have read, your problem could be due to a loading issue, try to read the answer with the 68 points:

I am wondering if you are perhaps loading the url too fast(before the iframe is fully loaded) and perhaps not all the correct data is being passed from the browser.

Have you tried to start the player from a mounted hook(When the DOM is ready).

[pedro-pinho]

Have you tried to start the player from a mounted hook(When the DOM is ready).

I'm sorry for my ignorance but how can I do that? If you are kind to provide a link with a tutorial or some sort, I could sort it out.

[Benoit1980]

When you use vue, you have hooks as shown here:
https://www.google.com/search?q=vue+hooks&rlz=1C1CHBF_enMT995MT995&sxsrf=ALiCzsYtEBLqsPrIcG4g6QJcvi3lAGl5XQ:1653933849957&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiE0-7c54f4AhXiSPEDHT_iA-EQ_AUoAXoECAEQAw&biw=1920&bih=937&dpr=1#imgrc=ubdKX47A5BaYPM

Imagine from top to bottom a series of functions running before or after the html is rendered.
Based on the package you are using:
https://www.npmjs.com/package/vue-youtube

Make sure that the play() function is not automatically started. Make sure it is setup like this:

In the example they give, you have manual start of the video when the <button @click="playVideo">play is clicked.
I wonder if your problem is because you try to play the video on page load.

export default {
  data() {
    return {
      videoId: 'lG0Ys-2d4MA'
    }
  },
  methods: {
    playVideo() {
      this.player.playVideo()
    },
    playing() {
      console.log('\o/ we are watching!!!')
    }
  },
  computed: {
    player() {
      return this.$refs.youtube.player
    }
  }
}

[pedro-pinho]

My code looks very similar to that. I'm not playing the video on page load.

I'm showing the video down the page after some text and I noticed that the iframe loads as the user scrolls down.

[Benoit1980]

Can you try in another browser to see if this happens aswell?
Not sure what else to do, if you checked the loading, the https, hostname....it is pretty much everything.

[pedro-pinho]

On Safari the error looks a bit different:

Unable to post message to https://www.youtube.com. Recipient has origin http://localhost:3000.

And on Firefox it looks like this:

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

I don't know what else to check either, already tried everything I found on google, stack overflow, etc.

[Benoit1980]

Perhaps the plugin is too old and needs an update, I think its been 3 years without an update. This could be the issue. Maybe something changed on the Youtube API side since.