Vue youtube is a wrapper for the YouTube IFrame Player API (YIPA). A simple component of a powerful API. vue-youtube provides a simple layer for you to use your imagination while using the YouTube IFrame Player API.

vue youtube embed, vue youtube embed responsive, youtube iframe autoplay, youtube iframe api npm, youtube iframe api example, youtube iframe responsive

(Bootstrap + jQuery) A Responsive Custom YouTube Player With Horizontal Playlist

How to make use of it:

Install & Download:

# Yarn
$ yarn add vue-youtube

# NPM
$ npm install vue-youtube --save

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

Props

YouTube IFrame Player API, VueYoutube Plugin/Github

See Demo And Download

Official Website(anteriovieira): Click Here

This superior jQuery/javascript plugin is developed by anteriovieira. For extra Advanced Usages, please go to the official website.