유튜브 iframe API - yutyubeu iframe API

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

목차 Show

Installation
How it works ?
Component Props
Component Events
Component Methods
Youtube Player instance

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

propdescriptiontypedefaultytidthe youtube video id (found in the url) note: both "ytid" & "yturl" can't be used at the same timeStringnullyturlthe youtube video url (the id will be auto-detected) note: both "ytid" & "yturl" can't be used at the same timeStringnullwidththe iframe's width note: youtube asks for 200 minimumStringNumberheightthe iframe's height note: youtube asks for 200 minimumStringNumberplayerVarsthe iframe's player variables, full list: https://developers.google.com/youtube/player_parameters?hl=frObject{}

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

eventdescriptionreadyfires when the player is ready and the player's instance can be usederrorfires when the player encounters an error https://developers.google.com/youtube/iframe_api_reference?hl=fr#Eventsunstartedfires when player ready but not started because no videoplayingfires when player starts playingpausedfires when player stops playing and is on pausecuedfires when a video was added to the player's queue but hasn't played yetbufferingfires when player starts buffering / loadingendedfires when player video has ended

Component Methods

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

methoddescriptionparamsloadByIdprogramatically loads a new video on the player by IDid: StringloadByUrlprogramatically loads a new video on the player by URLurl: 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