Embed Youtube and Vimeo Player Easily and Lazy Load Video | Vue Lazytube

vue-lazy-load-component

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

nuxt-lazy-load-component

Lazy Load YouTube And Vimeo Videos, Vue Lazytube Plugin/Github, lazy loading vuetify


See Demo And Download

Official Website(seeratawan01): Click Here

This superior jQuery/javascript plugin is developed by seeratawan01. For extra Advanced Usages, please go to the official website.