kaorun343 / vue-youtube-embed

Vue.js and YouTube
https://www.npmjs.com/package/vue-youtube-embed
MIT License
424 stars 53 forks source link

Failed to execute 'postMessage' on 'DOMWindow' #29

Open mardonedias opened 7 years ago

mardonedias commented 7 years ago

vue-youtube-embed version 2.1.2

The video loads normally, but the console displays the following message: Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://ibutapp-mardonedias.c9users.io:8081').]

Thank you very much in advance.

kaorun343 commented 7 years ago

Could you try the way that described in this page? https://github.com/brandly/angular-youtube-embed/pull/116 If that way solves this issue, I'll update this library.

Christilut commented 7 years ago

Same problem here

Setting this seems to fix it:

      this$1.player = new YouTube.Player(this$1.elementId, {
        height: playerHeight,
        width: playerWidth,
        playerVars: playerVars,
        videoId: videoId,
        host: 'https://www.youtube.com',
rafalowski commented 6 years ago

The problem is target and origin must be https

insane-kaos commented 6 years ago

I have the same problem. How could I solve it ?, the video loads perfectly but in the console it presents the following message (Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ( 'http://localhost:8080')).

I already added (host: 'https://www.youtube.com',) in the file (vue-youtube-embed.js) but it still does not work, please excuse my ignorance and my bad English,

sandy2609 commented 6 years ago

My website is configured without the www and the youtube link was with www that's why i was getting this error. Try to make it similar, I removed www from my youtube, and it works.

terrymun commented 6 years ago

@Christilut A little late to the party, but after scouring the web for solution yours is the only one that worked. Sadly the host property does not seem to be in the official documentation: I will make a PR to their @types/youtube library for that.

larstton commented 5 years ago
 this$1.player = new YouTube.Player(this$1.elementId, {
        height: playerHeight,
        width: playerWidth,
        playerVars: playerVars,
        videoId: videoId,
        host: 'https://www.youtube.com',

Where to add this settings? I am using Vue.js in combination with Laravel

Alex-Golovin commented 4 years ago

Have the same issue both in production (with SSL) and locally. Can't fix it.