Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaorun343/vue-youtube-embed
Vue.js and YouTube
https://github.com/kaorun343/vue-youtube-embed
vue youtube
Last synced: about 2 months ago
JSON representation
Vue.js and YouTube
- Host: GitHub
- URL: https://github.com/kaorun343/vue-youtube-embed
- Owner: kaorun343
- License: mit
- Created: 2016-01-10T17:58:15.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T12:30:26.000Z (over 1 year ago)
- Last Synced: 2024-07-18T21:13:50.036Z (2 months ago)
- Topics: vue, youtube
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/vue-youtube-embed
- Size: 250 KB
- Stars: 425
- Watchers: 8
- Forks: 53
- Open Issues: 49
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-cn - Vue YouTube Embed ★16
README
# Vue YouTube Embed
This is a component for Vue.js to utilize YouTube iframe API easily.
This is based on [Angular YouTube Embed](http://brandly.github.io/angular-youtube-embed/)
## License
MIT License
## install
```html
Vue.use(VueYouTubeEmbed)
```
or
```bash
// NPM
npm i -S vue-youtube-embed
// or with Yarn
yarn add vue-youtube-embed
```
```js
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.
```html
```
### 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`
```js
import { getIdFromURL, getTimeFromURL } from 'vue-youtube-embed'
let videoId = getIdFromURL(url)
let startTime = getTimeFromURL(url)
```
or
```js
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
```html
```
## Example on vue-play
```bash
// yarn or npm
yarn install
yarn run play
```
## Example code
```html
listening events
add options
```
```js
'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](https://nuxtjs.org/api/components-no-ssr/).
## Contribution
contribution welcome!