Vue Youtube - A Vue Js Wrapper of YouTube IFrame Player API

Antério Vieira introduced a Vue Js Wrapper of YouTube IFrame Player API (YIPA) called Vue-youtube. Vue-youtube is a simple component for a powerful API. It provides a simple layer for you to use your imagination while over the YouTube IFrame Player API. You can view it live demo here.

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

You can install this package via Npm or Yarn.

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

The component triggers events to notify the parent component of changes in the player. For more information, see YouTube IFrame Player API.

These are the following events in this package:

• ready
• ended
• playing
• paused
• buffering
• cued
• error

Player

You have access to all API methods through component referencing.

Example:

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

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

Tips for Resizing

Resizing proportionally (resize) works best with a parent element. The parent element is used for a width reference. fitParent should be on in most situations. It allows resizing to work without applying CSS any properties to your iframe. If you want to turn fitParent off, you can emulate it with CSS by setting the width to 100%, like so:

iframe {
  width: 100%;
  max-width: 650px; /* Also helpful. Optional. */
}

There is a lot more about this package. You can view its complete documentation and source code on Github.