🚀
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
~2KBjs (minified and gzipped) and~1KBcss - No dependencies
- Lazy load support
- Webp support, and fallback to
jpgif the browser doesn't support it - Render fast, improve your web's performance
- Built with a11y in mind
Installation
⚙️
npm
# Vue 2
npm install vuetube
# Vue 3
npm install [email protected]
yarn
# Vue 2
yarn add vuetube
# Vue 3
yarn add [email protected]
Install plugin
/**
* 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
/**
* 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
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.
">
<template> <vue-tube @player:ready="onPlayerReady">vue-tube> template> <script> export default { data() { return { playerInstance: null, } }, methods: { onPlayerReady(event) { this.playerInstance = event.target } } } script>
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.
How to use my play button?
You can pass your button through the icon slot.
How to use my thumbnail?
You can pass your thumbnail through the thumbnail slot.
">
<template> <vue-tube> <template #thumbnail> <img src="#" alt=""> template> vue-tube> template>
Browsers support
🌎
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
 iOS Safari |
 Samsung |
 Opera |
 Yandex |
|---|---|---|---|---|---|---|---|
| IE11, Edge 80 | 60+ | 60+ | 10+ | 10+ | 12+ | 50+ | 14.4+ |
License
📄
MIT
Inspiration
👏
Vuetube is a vue component version of the popular package 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 first.
Contributors
❤️
 Alexey Istomin ️️️️ |
91 Nov 18, 2021
7.8k Dec 29, 2022
107 Nov 16, 2022
31 Nov 18, 2020
37 Nov 14, 2022
9 Mar 31, 2022
0 Mar 29, 2020
0 Mar 19, 2021
7 Jun 1, 2022
0 Oct 21, 2021
57 Dec 22, 2022
23 Nov 4, 2022
67 Nov 24, 2022
711 Dec 9, 2022
26 Mar 9, 2022
252 Nov 21, 2022
25 Aug 11, 2021
99 Oct 27, 2022
29 Jul 14, 2022