Failed to execute 'postMessage' on 'DOMWindow'

[Demy]

Embedding video to the page causes this error in the console: Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin (*host name*)

"Angular YouTube Embed" has the same problem.

[SDVII]

I think adding a host to the YouTube Player object could fix the issue:

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

[Anploe]

i yust had the same issue and at least in my local enviroment setting :player-vars="{origin:'http://mydomain.local'}" seems to solve the issue

[renetik]

<template>
  <iframe :height="height" :src="youtubeUrl()" :width="width"/>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator'

  @Component
  export default class CSYoutubeVideo extends Vue {

    @Prop({ required: true }) videoId!: string
    @Prop({ required: true }) width!: string
    @Prop({ required: true }) height!: string

    youtubeUrl(): string {
      return `https://www.youtube.com/embed/${this.videoId}?modestbranding=1&playsinline=0
      &showinfo=0&enablejsapi=1&origin=${window.location.origin}&widgetid=1`
    }
  }
</script>

[dezignhero]

for playerVars setting origin: window.location.origin worked for me.

[sioniks]

for playerVars setting origin: window.location.origin worked for me.

for me worked to, but window.location.origin i set like String