Need help with vue-youtube?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

anteriovieira
264 Stars 43 Forks MIT License 121 Commits 27 Opened issues

Description

A simple component for a powerful API. vue-youtube provides a simple layer for you to use your imagination while over the YouTube IFrame Player API.

Services available

!
?

Need anything else?

Contributors list

# 23,975
Nuxt.js
composa...
axios
revisio...
91 commits
# 307,252
Vue.js
HTML
ngrx
vuejs
9 commits
# 52,026
CSS
HTML
Shell
accessi...
3 commits
# 97,638
esmodul...
webpack...
Babel
vuejs
1 commit
# 653,366
JavaScr...
vuejs
1 commit
# 629,149
JavaScr...
vuejs
1 commit
# 83,771
extract...
jQuery
vuejs
Ruby
1 commit
# 88,342
PHP
angular...
HTML
wavefor...
1 commit

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


Example

play
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

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 => | ready | ended | playing | paused | buffering | cued | error | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- |

Player

You have access to all api methods through component referencing.

Example:

export default {
  // ...
  methods: {
    playVideo() {
      this.$refs.youtube.player.playVideo()
    }
  }
}

Props

| Prop | Type(s) | Default | Description | | ----------- | -------------- | ------- | -------------------------------------------------------- | | width | Number, String | 640 |

iframe
pixel width | | height | Number, String | 360 |
iframe
pixel height | | resize | Boolean | false |
iframe
will proportionally scale height with its width | | resizeDelay | Number | 200 | Delay in milliseconds before running resize callback | | fitParent | Boolean | false |
iframe
will use its parent's width | | nocookie | Boolean | false | Change host param to www.youtube-nocookie.com |

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 ```js import { getIdFromUrl } from 'vue-youtube'

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

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.