Vue.js Wrapper of YouTube IFrame Player API

Install & Download:

# Yarn
$ yarn add vue-youtube
# NPM
$ npm install vue-youtube --save

Description:

vue-youtube is a wrapper of YouTube IFrame Player API.

Usage:

import Vue from 'vue'
import VueYoutube from 'vue-youtube'
Vue.use(VueYoutube)
<youtube :video-id="videoId" ref="youtube" @playing="playing"></youtube>
<button @click="playVideo">play</button>
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
    }
  }
}

Props:

props: {
  height: {
    type: [Number, String],
    default: 360
  },
  width: {
    type: [Number, String],
    default: 640
  },
  videoId: {
    type: String,
    required: true
  },
  playerVars: {
    type: Object,
    default: function () {
      return { autoplay: 0 }
    }
  }
},