This is a component for Vue.js to utilize YouTube iframe API easily. This is based on Angular YouTube Embed
MIT License
<script src="vue-youtube-embed.js"></script>
<script>
Vue.use(VueYouTubeEmbed)
</script>or
// NPM
npm i -S vue-youtube-embed
// or with Yarn
yarn add vue-youtube-embedimport 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 })Please pass the ID of the video that you'd like to show.
<youtube :video-id="videoId"></youtube>These are available props.
player-width:StringorNumber, default value is640player-height:StringorNumber, default value is390player-vars:Object, default value is{start: 0, autoplay: 0}Can also specifyrelandshowInfovideo-id:String,requiredmute:Booleandefault value isfalse
These functions are the same as the original one.
getIdFromURLgetTimeFromURL
import { getIdFromURL, getTimeFromURL } from 'vue-youtube-embed'
let videoId = getIdFromURL(url)
let startTime = getTimeFromURL(url)or
export default {
methods: {
method (url) {
this.videoId = this.$youtube.getIdFromURL(url)
this.startTime = this.$youtube.getTimeFromURL(url)
}
}
}These are the events that will be emitted by the component.
readyendedplayingpausedbufferingquederror
The first argument contains the instance of YT.Player at the parameter target.
<youtube :player-vars="{ autoplay: 1 }"></youtube>// yarn or npm
yarn install
yarn run play<div id="#app">
<section>
<h2>listening events</h2>
<youtube :video-id="videoId" @ready="ready" @playing="playing"></youtube>
</section>
<section>
<h2>add options</h2>
<youtube :video-id="videoId" player-width="1280" player-height="750" :player-vars="{autoplay: 1}"></youtube>
</section>
</div>'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 (player) {
this.player = player
},
playing (player) {
// 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()
}
}
})To get this component working with Nuxt, wrap it in Nuxt's no-ssr component.
contribution welcome!