Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-youtube with all npm packages installed. Try it out:

require("vue/package.json"); // vue is a peer dependency. var vueYoutube = require("vue-youtube")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-youtube v1.4.0

YouTube IFrame Player API wrapper

vue-youtube

VueYoutube

npm vue2 Downloads License

Intro

vue-youtube is an wrapper of YouTube IFrame Player API (YIPA).

What is the difference between other plugins? The difference is that the function body is wrapped in a promise. This promise is resolved only when the player has finished loading and is ready to begin receiving API calls (onReady). Therefore, all function calls are queued and replayed only when player is ready.

You can do something like:

export default {
  // ...
  computed: {
    player() {
      return this.$refs.youtube.player
    }
  },
  methods: {
    async playVideo() {
      await this.player.playVideo()
      // Do something after the playVideo command
    }
  }
}

Live demo built on top of the awesome codesandbox.

Installation

npm install vue-youtube
# or
yarn add vue-youtube

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueYoutube from 'vue-youtube'

Vue.use(VueYoutube)

Browser

<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-youtube/dist/vue-youtube.js"></script>

Example

<youtube :video-id="videoId" ref="youtube" @playing="playing"></youtube>
<button @click="playVideo">play</button>
export default {
  data() {
    return {
      videoId: 'lG0Ys-2d4MA'
    }
  },
  methods: {
    playVideo() {
      this.player.playVideo()
    },
    playing() {
      console.log('\o/ we are watching!!!')
    }
  },
  computed: {
    player() {
      return this.$refs.youtube.player
    }
  }
}

or

<youtube :video-id="videoId" :player-vars="playerVars" @playing="playing"></youtube>
export default {
  data() {
    return {
      videoId: 'lG0Ys-2d4MA',
      playerVars: {
        autoplay: 1
      }
    }
  },
  methods: {
    playing() {
      console.log('\o/ we are watching!!!')
    }
  }
}

Live demo

Events

The component triggers events to notify the parent component of changes in the player. For more information, see YouTube IFrame Player API.

Events =>readyendedplayingpausedbufferingcuederror

Player

You have access to all api methods through component referencing.

Example:

<youtube video-id="lG0Ys-2d4MA" ref="youtube"></youtube>
export default {
  // ...
  methods: {
    playVideo() {
      this.$refs.youtube.player.playVideo()
    }
  }
}

Props

PropType(s)DefaultDescription
widthNumber, String640iframe pixel width
heightNumber, String360iframe pixel height
resizeBooleanfalseiframe will proportionally scale height with its width
resizeDelayNumber200Delay in milliseconds before running resize callback
fitParentBooleanfalseiframe will use its parent's width

Tips for Resizing

Resizing proportionally (resize) works best with a parent element. The parent element is used for a width reference. fitParent should be on in most situations. It allows resize to work without appyling CSS any properties to your iframe. If you want to turn fitParent off, you can emulate it with CSS by setting width to 100%, like so:

iframe {
  width: 100%;
  max-width: 650px; /* Also helpful. Optional. */
}

API

vm.$youtube.getIdFromUrl

New in v1.2.0

  • Type: Function
  • Description: Parse a youtube url returning the video ID. (get-youtube-id)
  • Arguments:
    • {String} url
    • {Object} options
  • Usage:
...
  methods: {
    getId () {
      return this.$youtube.getIdFromUrl(this.video.url)
    }
  }
...

or

import { getIdFromUrl } from 'vue-youtube'

const myFunction = (url) => {
  const youtubeId = getIdFromUrl(url)
  // ...
}

License

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free