www-widgetapi.js:115 Failed to execute 'postMessage' on 'DOMWindow about vue-youtube HOT 22 OPEN

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

from vue-youtube.

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

from vue-youtube.

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.

from vue-youtube.

Also www-widgetapi.js:108

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

from vue-youtube.

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?

from vue-youtube.

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

from vue-youtube.

sameeee dang

from vue-youtube.

same +1

from vue-youtube.

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

from vue-youtube.

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

from vue-youtube.

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.

from vue-youtube.

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

from vue-youtube.

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').

from vue-youtube.

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

from vue-youtube.

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

from vue-youtube.

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]

from vue-youtube.

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

from vue-youtube.

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.

from vue-youtube.

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
    }
  }
}

from vue-youtube.

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.

from vue-youtube.

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.

from vue-youtube.

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.

from vue-youtube.