Lazy Load YouTube And Vimeo Videos - Vue Lazytube

Install & Download:

# Yarn
$ yarn add vue-lazytube
# NPM
$ npm i vue-lazytube

Description:

Vue Lazytube is a Vue component for lazy loading Youtube and Vimeo videos to improve performance.

This component delays the loading of Youtube/Vimeo players until you click the thumbnails.

How to use it:

1. Import and register the component.

// globally
import LazyTube from "vue-lazytube";
Vue.use(LazyTube);
// locally
import { LazyYoutube, LazyVimeo } from "vue-lazytube";
export default {
  name: 'YourComponent',
  components: {
    LazyYoutube,
    LazyVimeo
  },
}

2. Embed Youtube and Vimeo videos into your app.

<template>
  <LazyYoutube src="https://www.youtube.com/watch?v=VIDEO-ID" />
  <LazyVimeo src="https://player.vimeo.com/video/VIDEO-ID" />
</template>

3. Available component props.

src: {
  type: String,
  required: true,
},
aspectRatio: {
  type: String,
  default: '16:9',
  validator: function (value) {
      return /^\d+:\d+$/.test(value)
  },
},
showTitle: {
  type: Boolean,
  default: true
},
maxWidth: {
  type: String,
  default: '560px'
},
autoplay: {
  type: Boolean,
  default: false
},
thumbnailQuality: {
  type: String,
  default: 'standard'
},
iframeClass: {
  type: String,
  default: 'ly-iframe'
},
customTitle: {
  type: String,
  default: ''
},
customThumbnail: {
  type: String,
  default: ''
}

4. API methods to control the videos.

// play the video
this.$refs["lazyVideo"]['playVideo']();
// stop the video
this.$refs["lazyVideo"]['stopVideo']()
// pause the video
this.$refs["lazyVideo"]['pauseVideo']()
// reset
resetView function this.$refs["lazyVideo"]['resetView']()