Nutritious Pumpkin Meal

    vuetube
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    🚀 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 FeaturesInstallationDocumentationFAQBrowsers supportLicenseInspirationSupport the projectContributing

    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

    npm install vuetube

    yarn

    yarn add vuetube

    Install plugin

    import Vue from 'vue'
    import VueTube from 'vuetube';
    import 'vuetube/dist/vuetube.css'
    
    Vue.use(VueTube)

    or

    Install component

    import Vue from 'vue'
    import { VueTube } from 'vuetube';
    import 'vuetube/dist/vuetube.css'
    
    Vue.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 📄

    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

    ️️️️♿️ ⚠️ 💻 🤔

    Install

    npm i vuetube

    DownloadsWeekly Downloads

    44

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    127 kB

    Total Files

    51

    Last publish

    Collaborators

    • webistomin