Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/anteriovieira/vue-youtube

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.
https://github.com/anteriovieira/vue-youtube

player vue-youtube vuejs youtube

Last synced: about 1 month ago
JSON representation

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.

Lists

README 

        


  vue-youtube 


  
VueYoutube



npm vue2

Downloads License



## Intro



[vue-youtube](https://www.npmjs.com/package/vue-youtube) is an wrapper of [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference) (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:



```js

export default {

  // ...

  computed: {

    player() {

      return this.$refs.youtube.player

    }

  },

  methods: {

    async playVideo() {

      await this.player.playVideo()

      // Do something after the playVideo command

    }

  }

}

```



[Live demo](https://codesandbox.io/s/oll3o58xvy) built on top of the awesome [codesandbox](https://codesandbox.io).



## Installation



```bash

npm install vue-youtube

# or

yarn add vue-youtube

```



## Usage



### Bundler (Webpack, Rollup)



```js

import Vue from 'vue'

import VueYoutube from 'vue-youtube'



Vue.use(VueYoutube)

```



### Browser



```html



```



### Example



```html



play

```



```js

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



```html



```



```js

export default {

  data() {

    return {

      videoId: 'lG0Ys-2d4MA',

      playerVars: {

        autoplay: 1

      }

    }

  },

  methods: {

    playing() {

      console.log('\o/ we are watching!!!')

    }

  }

}

```



[Live demo](http://vue-youtube.herokuapp.com/)



### Events



The component triggers [events](https://developers.google.com/youtube/iframe_api_reference#Events) to notify the parent component of changes in the player. For more information, see [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference#Events).



| Events => | ready     | ended     | playing   | paused    | buffering | cued      | error     |

| --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- |



### Player



You have access to all [api methods](https://developers.google.com/youtube/iframe_api_reference#Functions) through [component referencing](https://vuejs.org/v2/api/#ref).



Example:



```html



```



```js

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:



```css

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](https://github.com/jmorrell/get-youtube-id))

- **Arguments:**

  - `{String} url`

  - `{Object} options`

- **Usage:**



```js

...

  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](http://opensource.org/licenses/MIT)