Vue Youtube Iframe API

Hi, this is a Vue plugin to add youtube embed videos to your web project and control them.

It is very handy to create a custom player based on youtube videos, checkout this website for example : https://foreignrap.com

Installation

First add it to your project via yarn:

yarn add vue-youtube-iframe-api

OR npm:

npm install vue-youtube-iframe-api --save

Then, tell Vue about the plugin (Note that the name of the variable here is up to you).

import Vue from 'vue'
import VuePlayerPlugin from 'vue-youtube-iframe-api'
 
// simple way
Vue.use(VuePlayerPlugin)
// OR, with configuration
Vue.use(VuePlayerPlugin, {
  with: '', // optional, used to set global width on all futur instance
  height: '' // optional, used to set global width on all futur instance
  loadComponent: true // create the global player component <vytia-player></vytia-player>
})
 
new Vue( ... )

This Vue plugin gives you access to a <vytia-player ytid="..."></vytia-player> component.

However, you can use the component name you want by importing the component locally or globally.

import Vue from 'vue'
import VuePlayerPlugin, { Player } from 'vue-youtube-iframe-api'
 
Vue.use(VuePlayerPlugin)
 
// globally
Vue.component('my-custom-name', Player)
 
// OR locally
new Vue({
  components: {
    MyPlayer: Player
  }
})

How it works ?

Just add the component where you want with either a ytid or yturl prop.

When the prop changes, the player will automatically load the new relevant video.

Component Props

prop	description	type	default
ytid	the youtube video id (found in the url) note: both "ytid" & "yturl" can't be used at the same time	String	null
yturl	the youtube video url (the id will be auto-detected) note: both "ytid" & "yturl" can't be used at the same time	String	null
width	the iframe's width note: youtube asks for 200 minimum	String	Number
height	the iframe's height note: youtube asks for 200 minimum	String	Number
playerVars	the iframe's player variables, full list: https://developers.google.com/youtube/player_parameters?hl=fr	Object	{}

Make sure to look at all player variables as this will help you remove controls from the youtube iframe.

https://developers.google.com/youtube/player_parameters?hl=fr

Component Events

event	description
ready	fires when the player is ready and the player's instance can be used
error	fires when the player encounters an error https://developers.google.com/youtube/iframe_api_reference?hl=fr#Events
unstarted	fires when player ready but not started because no video
playing	fires when player starts playing
paused	fires when player stops playing and is on pause
cued	fires when a video was added to the player's queue but hasn't played yet
buffering	fires when player starts buffering / loading
ended	fires when player video has ended

Component Methods

You can access these methods by adding a ref on the component.

method	description	params
loadById	programatically loads a new video on the player by ID	id: String
loadByUrl	programatically loads a new video on the player by URL	url: String

Youtube Player instance

You can access the youtube player's instance by adding a ref on the component. You need to wait for the player to be ready though. When the player is not ready, the property holding the instance is null.

Full list of the instance's methods you can use below: https://developers.google.com/youtube/iframe_api_reference?hl=fr#Playback_controls

<vytia-player ytid="some youtube id" ref="yt" @ready="onPlayerReady"></vytia-player>

new Vue({
  methods: {
    onPlayerReady () {
      // you have access to the ref here
      this.$refs.yt.player.seekTo( ... )
 
      // you can see the full list of methods available here
      // https://developers.google.com/youtube/iframe_api_reference?hl=fr#Playback_controls
    }
  }
})

Make sure to check out the demo to see how to control the player.

The demo works with parcel-bundler.

Install it by doing npm install -g parcel-bundler or yarn global add parcel-bundler.