Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webistomin/vuetube
🚀 A fast, lightweight, lazyload vue component acting as a thin layer over the YouTube Iframe Player API which renders fast
https://github.com/webistomin/vuetube
vue-youtube vue-youtube-iframe vuetube youtube youtube-api youtube-player
Last synced: 2 months ago
JSON representation
🚀 A fast, lightweight, lazyload vue component acting as a thin layer over the YouTube Iframe Player API which renders fast
- Host: GitHub
- URL: https://github.com/webistomin/vuetube
- Owner: webistomin
- License: mit
- Created: 2021-01-15T06:24:40.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-10T00:04:33.000Z (almost 2 years ago)
- Last Synced: 2024-10-10T16:30:49.795Z (3 months ago)
- Topics: vue-youtube, vue-youtube-iframe, vuetube, youtube, youtube-api, youtube-player
- Language: TypeScript
- Homepage: https://vuetube-ten.vercel.app/
- Size: 5.08 MB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
🚀
VueTube
Vue component acting as a thin layer over the YouTube IFrame Player API which renders fast.
Explore website »
Key Features •
Installation •
Documentation •
FAQ •
Browsers support •
License •
Inspiration •
Support the project •
Contributing
## Key Features ✨
* **Small** `~2KB` js (minified and gzipped) and `~1KB` css
* **No dependencies**
* **Lazy load** support
* **Webp support**, and fallback to `jpg` if the browser doesn't support it
* **Render fast**, improve your web's performance
* Built with **a11y** in mind
## Installation ⚙️
**npm**
```shell
# Vue 2
npm install vuetube
# Vue 3
npm install vuetube@next
```
**yarn**
```shell
# Vue 2
yarn add vuetube
# Vue 3
yarn add vuetube@next
```
**Install plugin**
```js
/**
* Vue 2
*/
import Vue from 'vue'
import VueTube from 'vuetube';
import 'vuetube/dist/vuetube.css'
Vue.use(VueTube)
/**
* Vue 3
*/
import { createApp } from 'vue'
import VueTube from 'vuetube';
import 'vuetube/dist/vuetube.css'
import App from './App.vue'
const app = createApp(App)
app.use(VueTube)
```
or
**Install component**
```js
/**
* Vue 2
*/
import Vue from 'vue'
import { VueTube } from 'vuetube';
import 'vuetube/dist/vuetube.css'
Vue.component('VueTube', VueTube)
/**
* Vue 3
*/
import { createApp } from 'vue'
import { VueTube } from 'vuetube';
import 'vuetube/dist/vuetube.css'
import App from './App.vue'
const app = createApp(App)
app.component('VueTube', VueTube)
```
## Documentation 🤗
Browse [online documentation here](https://vuetube-ten.vercel.app/)
### Props
Prop
Type
Description
Default value
videoId
string
The ID of YouTube video (required)
-
isPlaylist
boolean
Should embed a playlist of several videos
false
aspectRatio
number
The aspect ratio for iframe
16 / 9
enableCookies
boolean
Change video host to www.youtube.com. By default, video loaded from https://www.youtube-nocookie.com.
false
playerVars
object
Parameters that are available in the YouTube embedded player.
{}
disableWarming
boolean
Disable warming up connections to origins that are in the critical path on component hover.
false
disableWebp
boolean
Disable webp thumbnail.
false
imageAlt
string
Alt attribute for image
''
imageLoading
string
Loading attribute for image
'lazy'
resolution
string
Thumbnail resolution from YouTube API.
'sddefault'
buttonLabel
string
Aria-label attribute for button
'Play video'
iframeTitle
string
Title attribute for iframe
''
iframeAllow
string
Allow attribute for iframe
'accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture'
### Events
Event name
Description
player:play
The user clicked on the play button
player:load
Iframe has been loaded
player:ready
This event fires whenever a player has finished loading and is ready to begin receiving API calls.
Make sure you pass enablejsapi: 1 to the playerVars props object
This event is similar to onReady event from Youtube API documentation.
player:statechange
This event fires whenever the player's state changes.
Make sure you pass enablejsapi: 1 to the playerVars props object
This event is similar to onStateChange event from Youtube API documentation.
player:playbackqualitychange
This event fires whenever the video playback quality changes.
Make sure you pass enablejsapi: 1 to the playerVars props object
This event is similar to onPlaybackQualityChange event from Youtube API documentation.
player:playbackratechange
This event fires whenever the video playback rate changes.
Make sure you pass enablejsapi: 1 to the playerVars props object
This event is similar to onPlaybackRateChange event from Youtube API documentation.
player:error
This event fires if an error occurs in the player.
Make sure you pass enablejsapi: 1 to the playerVars props object
This event is similar to onError event from Youtube API documentation.
player:apichange
This event is fired to indicate that the player has loaded (or unloaded) a module with exposed API methods.
Make sure you pass enablejsapi: 1 to the playerVars props object
This event is similar to onApiChange event from Youtube API documentation.
## FAQ 🗯️
### How to get access to player API?
You need to pass enablejsapi: 1 to the playerVars props object. Then subscribe on player:ready event.
```vue
export default {
data() {
return {
playerInstance: null,
}
},
methods: {
onPlayerReady(event) {
this.playerInstance = event.target
}
}
}
```
Now you have a player instance in the `playerInstance`. You can do whatever you want with video.
`this.playerInstance.playVideo()`, `this.playerInstance.pauseVideo()` etc. All methods can be found [here](https://developers.google.com/youtube/iframe_api_reference#Playback_controls).
### How to use my play button?
You can pass your button through the `icon` slot.
```vue
```
### How to use my thumbnail?
You can pass your thumbnail through the `thumbnail` slot.
```vue
```
## Browsers support 🌎
| [
](http://godban.github.io/browsers-support-badges/)
IE / Edge | [
](http://godban.github.io/browsers-support-badges/)
Firefox | [
](http://godban.github.io/browsers-support-badges/)
Chrome | [
](http://godban.github.io/browsers-support-badges/)
Safari | [
](http://godban.github.io/browsers-support-badges/)
iOS Safari | [
](http://godban.github.io/browsers-support-badges/)
Samsung | [
](http://godban.github.io/browsers-support-badges/)
Opera | [
](http://godban.github.io/browsers-support-badges/)
Yandex |
| --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- |
| IE11, Edge 80 | 60+ | 60+ | 10+ | 10+ | 12+ | 50+ | 14.4+
## License 📄
### [MIT](https://github.com/webistomin/vuetube/blob/master/LICENSE)
## Inspiration 👏
Vuetube is a vue component version of the popular package [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed).
## Support the project ⭐
If you feel awesome and want to support me in a small way, please consider starring and sharing the repo!
## Contributing 🎉
Found a bug? Missing a specific feature?
Your contributions are always welcome! Please have a look at the [contribution guidelines](https://github.com/webistomin/vuetube/blob/master/CONTRIBUTING.md) first.
## Contributors ❤️
