Embed Youtube Vimeo Player Easily and Lazy Load Video Plugin

Vue Lazytube is to easily embed YouTube or Vimeo player and slow-motion video loading to save resources and reduce initial upload size. Useful when performance and page size is important or for sites with many embedded videos.

lazy load youtube embed plugin, how to lazy load youtube video, vue lazy load component scroll, vue lazyload example, nuxt lazy load component, vue 3 lazy load component

Features

Reduces initial upload size by about 1.1MB per video
Fully responsive and customizable through props
Provides ways to control (play, pause, pause and reset) embedded videos
Provides options to set up a custom title and preview embedded videos
Supported platform: Youtube and Vimeo

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-lazytube

# NPM
$ npm i vue-lazytube

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 in your app.

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

3. Component props available.

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