/vuetube

๐Ÿš€ A fast, lightweight, lazyload vue component acting as a thin layer over the YouTube Iframe Player API which renders fast

Primary LanguageTypeScriptMIT LicenseMIT

๐Ÿš€ VueTube

Vue component acting as a thin layer over the YouTube IFrame Player API which renders fast.
Explore website ยป


NPM version NPM downloads GitHub issues GitHub last commit npm type definitions npm bundle size

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

# Vue 2
npm install vuetube

# Vue 3
npm install vuetube@next

yarn

# Vue 2
yarn add vuetube

# Vue 3
yarn add vuetube@next

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.

  <template>
    <vue-tube>
      <template #icon>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="48"
          height="48"
          viewBox="0 0 24 24"
          aria-hidden="true"
          focusable="false"
        >
          <path
            fill="#fff"
            d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 17v-10l9 5.146-9 4.854z"
          />
        </svg>
      </template>
    </vue-tube>
  </template>

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
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Samsung
Samsung
Opera
Opera
Yandex
Yandex
IE11, Edge 80 60+ 60+ 10+ 10+ 12+ 50+ 14.4+

License ๐Ÿ“„

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

๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ โš ๏ธ ๐Ÿ’ป ๐Ÿค”