YouTube.vue

<template>
  <div class="center you-tube">
    <div id="yt-player"></div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { scriptLoader } from "../script-loader";

@Component
export default class YouTube extends Vue {
  @Prop() private videoId?: string;
  @Prop() private autoPlay?: number;
  @Prop() private loop?: boolean;
  private player: any;
  mounted() {
    scriptLoader("https://www.youtube.com/iframe_api", true);
    (window as any).onYouTubeIframeAPIReady = () => {
      this.player = new (window as any).YT.Player("yt-player", {
        height: "100%",
        width: "100%",
        videoId: this.videoId,
        events: {
          onReady: (event: any) => {
            this.player.mute();
            event.target.playVideo();
          }
        },
        playerVars: {
          autoplay: this.autoPlay || 1,
          loop: this.loop || true,
          playlist: this.videoId
        }
      });
    };
  }
}
</script>
<style scoped lang="scss">
.you-tube {
  position: relative;
  iframe {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>

YouTube widget for Mustard

Setting up

Install this widget by running $ mustard -gist=a0c0fc7ccaeb5171cbf97ab087af2d05

Configuration

In App.Vue add this component and set the videoId that needs to play from YouTube.

<YouTube videoId="tuNoNuHRw_o" loop="true" />