Vue YouTube Embed

This is a component for Vue.js to utilize YouTube iframe API easily.
This is based on Angular YouTube Embed

License

MIT License

install

``html


`

or

`bash
// NPM
npm i -S vue-youtube-embed

// or with Yarn
yarn add vue-youtube-embed
`

`js
import Vue from 'vue'
import VueYouTubeEmbed from 'vue-youtube-embed'
Vue.use(VueYouTubeEmbed)
// if you don't want install the component globally
Vue.use(VueYouTubeEmbed, { global: false })
// if you want to install the component globally with a different name
Vue.use(VueYouTubeEmbed, { global: true, componentId: "youtube-media" })
`

Usage

Please pass the ID of the video that you'd like to show.

`html




`

$3

These are available props.

* player-width: String or Number, default value is 640
* player-height: String or Number, default value is 360
* player-vars: Object, default value is {start: 0, autoplay: 0} Can also specify rel.
* video-id: String, required
* mute: Boolean default value is false
* host: String default value is https://www.youtube.com. Can be set to https://www.youtube-nocookie.com as well.

$3

These functions are the same as the original one.

* getIdFromURL
* getTimeFromURL

`js
import { getIdFromURL, getTimeFromURL } from 'vue-youtube-embed'
let videoId = getIdFromURL(url)
let startTime = getTimeFromURL(url)
`

or

`js
export default {
methods: {
method (url) {
this.videoId = this.$youtube.getIdFromURL(url)
this.startTime = this.$youtube.getTimeFromURL(url)
}
}
}
`

$3

These are the events that will be emitted by the component.

* ready
* ended
* playing
* paused
* buffering
* qued
* error

The first argument contains the instance of YT.Player at the parameter target.

$3

`html

`

Example on vue-play

`bash
// yarn or npm
yarn install
yarn run play
`

Example code

`html



`

`js
'use strict'
import Vue from 'vue'
import VueYouTubeEmbed from 'vue-youtube-embed'

Vue.use(VueYouTubeEmbed)

const app = new Vue({
el: '#app',
data: {
videoId: 'videoId',
},
methods: {
ready (event) {
this.player = event.target
},
playing (event) {
// The player is playing a video.
},
change () {
// when you change the value, the player will also change.
// If you would like to change playerVars, please change it before you change videoId.
// If playerVars.autoplay is 1, loadVideoById will be called.
// If playerVars.autoplay is 0, cueVideoById will be called.
this.videoId = 'another video id'
},
stop () {
this.player.stopVideo()
},
pause () {
this.player.pauseVideo()
}
}
})
`

Usage with Nuxt SSR

To get this component working with Nuxt, wrap it in Nuxt's no-ssr` component.

Contribution

contribution welcome!