Clone or download
kaorun343 Merge pull request #53 from tarikhamilton/update-default-size
Update player height to match 16:9 ratio
Latest commit 0c3363b Nov 16, 2018

Vue YouTube Embed

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.umd.js"></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'
// 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" })


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>


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


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)


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">
    <h2>listening events</h2>
    <youtube :video-id="videoId" @ready="ready" @playing="playing"></youtube>
    <h2>add options</h2>
    <youtube :video-id="videoId" player-width="1280" player-height="750" :player-vars="{autoplay: 1}"></youtube>
'use strict'
import Vue from 'vue'
import VueYouTubeEmbed from 'vue-youtube-embed'


const app = new Vue({
  el: '#app',
  data: {
    videoId: 'videoId',
  methods: {
    ready (event) {
      this.player =
    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 () {
    pause () {

Usage with Nuxt SSR

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


contribution welcome!