Vue Lazytube is introduced by Seerat Awan. It offers the feature to embed a YouTube or Vimeo player easily and lazy load the video to save resources and reduces initial load size. It is very useful when performance and page size is important or for sites with many embedded videos. For a simple example page with 10 videos, vue-lazytube will reduce loadtime by 7x and memory usage by 2-3x. You can view its demo here.

Features

• Reduces initial load size by ~1.1 MB per video
• Fully responsive and customizable through props
• Provides methods to control (play, stop, pause and reset) embedded videos
• Provide options to set up custom titles and preview embedded videos
• Platform supported: Youtube and Vimeo

Installation

You can install it via Npm or Yarn:

NPM

 npm install --save vue-lazytube

Yarn

yarn add vue-lazytube

To make the plugin available globally
In your main.js, You’ve to import it in your app.js.

import LazyTube from "vue-lazytube";

Vue.use(LazyTube);
To include only in specific components
import { LazyYoutube, LazyVimeo } from "vue-lazytube";

export default {
    name: 'YourComponent',
    components: {
        LazyYoutube,
        LazyVimeo
    },
}

Usage

After importing the package you can use this in your vue component.

<template>
    <!-- Youtube Embed -->
    <LazyYoutube src="https://www.youtube.com/watch?v=TcMBFSGVi1c" />

    <!-- Vimeo Embed -->
    <LazyVimeo src="https://player.vimeo.com/video/64654583" />
</template>

For Example

<template>
    <LazyYoutube
        ref="lazyVideo"
        src="https://www.youtube.com/watch?v=TcMBFSGVi1c"
    />
    
    <button @click="handleClick('playVideo')">Play</button>
    <button @click="handleClick('stopVideo')">Stop</button>
    <button @click="handleClick('pauseVideo')">Pause</button>
    <button @click="handleClick('resetView')">Reset</button>
</template>

<script>
    export default {
      name: "YourComponent",
      components: {},
      methods: {
        handleClick(event) {
          this.$refs["lazyVideo"][event]();
        },
      },
    };
</script>

There are many more props and slots in this package. If you want to utilize this in your project you should view its whole documentation on Github.