Vue.js Wrapper of YouTube IFrame Player API

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

Preview:

Changelog:

02/03/2021

• feat: ensure start and end parameters are used when videoId is updated

10/22/2019

• v1.4.0

Download Details:

Author: anteriovieira

Live Demo: http://vue-youtube.herokuapp.com/

Download Link: https://github.com/anteriovieira/vue-youtube/archive/master.zip

Official Website: https://github.com/anteriovieira/vue-youtube

Install & Download:

# Yarn
$ yarn add vue-youtube

# NPM
$ npm install vue-youtube --save