Blog Detail

4

Oct
Vue Lazytube - Embed a YouTube Video Player with Lazyload cover image

Vue Lazytube - Embed a YouTube Video Player with Lazyload

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.

Published at : 04-10-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project