Skip to content

kaorun343/vue-youtube-embed

Folders and files

NameName
Last commit message
Last commit date
Oct 28, 2018
Jul 20, 2019
Oct 28, 2018
Jun 14, 2019
Jun 6, 2019
Jan 15, 2017
Mar 18, 2017
Jan 15, 2017
Jan 11, 2016
Jun 6, 2019
Jun 30, 2018
Jul 20, 2019
Jul 6, 2018
Mar 18, 2017
Dec 8, 2022

Repository files navigation

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 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)

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!