vuetube v1.0.1

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/vuetube.css'

Vue.use(VueTube)

or

Install component

import Vue from 'vue'
import { VueTube } from 'vuetube';
import 'vuetube/vuetube.css'

Vue.component('VueTube', VueTube)

Documentation 🤗

Browse online documentation here

Props

Events

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 🌎

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 ❤️