Lazy Load YouTube And Vimeo Videos – Vue Lazytube

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']()

Preview:

Changelog:

05/19/2022

• v1.1.1

Download Details:

Author: seeratawan01

Live Demo: https://codesandbox.io/s/vue-lazytube-hj03y

Download Link: https://github.com/seeratawan01/vue-lazytube/archive/refs/heads/master.zip

Official Website: https://github.com/seeratawan01/vue-lazytube

Install & Download:

# Yarn
$ yarn add vue-lazytube

# NPM
$ npm i vue-lazytube