vue3-youtube
Version:
Wrapper for YouTube IFrame Player API
66 lines (57 loc) • 2 kB
Markdown
for [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference)
```bash
npm install vue3-youtube
yarn add vue3-youtube
```
Browser:
```html
<script src="dist/vue3-youtube.umd.min.js"></script>
```
Global registration:
```js
import Vue from 'vue'
import YouTube from 'vue3-youtube'
Vue.component('YouTube', YouTube)
```
or locally:
```vue
<template>
<YouTube
src="https://www.youtube.com/watch?v=jNQXAC9IVRw"
@ready="onReady"
ref="youtube" />
</template>
<script>
import { defineComponent } from 'vue'
import YouTube from 'vue3-youtube'
export default defineComponent({
components: { YouTube },
methods: {
onReady() {
this.$refs.youtube.playVideo()
},
},
})
</script>
```
| Name | Type | Default | Description |
|--------|----------------|---------|------------------------------------------------------------------------------------------|
| src | String | | Youtube video link or ID. Required. |
| width | Number, String | 640 | Player width. |
| height | Number, String | 360 | Player height. |
| host | String | | Points host to correct origin for CORS. |
| vars | Object | | [Player parameters](https://developers.google.com/youtube/player_parameters#Parameters). |
- ready
- state-change
- playback-quality-change
- playback-rate-change
- error
- api-change
[ ](https://developers.google.com/youtube/iframe_api_reference#Functions)
Wrapper