vue-youtube-embed
v2.2.2
Published
Vue.js and YouTube
Downloads
28,289
Readme
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
<script src="vue-youtube-embed.umd.js"></script>
<script>
Vue.use(VueYouTubeEmbed)
</script>
or
// NPM
npm i -S vue-youtube-embed
// or with Yarn
yarn add vue-youtube-embed
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.
<youtube :video-id="videoId"></youtube>
<!-- or with a custom component identifier -->
<youtube-media :video-id="videoId"></youtube-media>
Props
These are available props.
player-width
:String
orNumber
, default value is640
player-height
:String
orNumber
, default value is360
player-vars
:Object
, default value is{start: 0, autoplay: 0}
Can also specifyrel
.video-id
:String
,required
mute
:Boolean
default value isfalse
host
:String
default value ishttps://www.youtube.com
. Can be set tohttps://www.youtube-nocookie.com
as well.
Methods
These functions are the same as the original one.
getIdFromURL
getTimeFromURL
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)
}
}
}
Events
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
.
The way of start playing video automatically
<youtube :player-vars="{ autoplay: 1 }"></youtube>
Example on vue-play
// yarn or npm
yarn install
yarn run play
Example code
<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 (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!