A simple layer for you to use your imagination while over the YouTube API

by Vue.js Examples

VueYoutube

A simple component for a powerful API. vue-youtube provides a simple layer for you to use your imagination while over the YouTube IFrame Player API.

View demo Download Source

vue-youtube is an wrapper of YouTube IFrame Player API (YIPA).

What is the difference between other plugins? The difference is that the function body is wrapped in a promise. This promise is resolved only when the player has finished loading and is ready to begin receiving API calls (onReady). Therefore, all function calls are queued and replayed only when player is ready.

You can do something like:

export default {
  // ...
  computed: {
    player () {
      return this.$refs.youtube.player
    }
  },
  methods: {
    async playVideo() {
      await this.player.playVideo()
      // Do something after the playVideo command
    }
  }
}

Installation

npm install vue-youtube
# or
yarn add vue-youtube

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueYoutube from 'vue-youtube'

Vue.use(VueYoutube)

Browser

<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-youtube/dist/vue-youtube.js"></script>

Example

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

or

<youtube :video-id="videoId" :player-vars="playerVars" @playing="playing"></youtube>

export default {
  data() {
    return {
      videoId: 'lG0Ys-2d4MA',
      playerVars: {
        autoplay: 1
      }
    }
  },
  methods: {
    playing() {
      console.log('\o/ we are watching!!!')
    }
  }
}

Events

Event
ready
ended
playing
paused
buffering
cued
error

Player

Example:

<youtube video-id="lG0Ys-2d4MA" ref="youtube"></youtube>

export default {
  // ...
  methods: {
    playVideo() {
      this.$refs.youtube.player.playVideo()
    }
  }
}

API

vm.$youtube.getIdFromUrl

New in v1.2.0

  • Type: Function
  • Description: Parse a youtube url returning the video ID. (get-youtube-id)
  • Arguments:
    • {String} url
    • {Object} options
  • Usage:
...
  methods: {
    getId () {
      return this.$youtube.getIdFromUrl(this.video.url)
    }
  }
...

GitHub