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>

// 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 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.

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)

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!

kaorun343/vue-youtube-embed

kaorun343

Reviews

Repository Details