Blog Detail


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

arrow_back 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.


  • 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


You can install it via Npm or Yarn:


 npm install --save vue-lazytube


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";

To include only in specific components
import { LazyYoutube, LazyVimeo } from "vue-lazytube";

export default {
    name: 'YourComponent',
    components: {


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

    <!-- Youtube Embed -->
    <LazyYoutube src="" />

    <!-- Vimeo Embed -->
    <LazyVimeo src="" />
For Example
    <button @click="handleClick('playVideo')">Play</button>
    <button @click="handleClick('stopVideo')">Stop</button>
    <button @click="handleClick('pauseVideo')">Pause</button>
    <button @click="handleClick('resetView')">Reset</button>

    export default {
      name: "YourComponent",
      components: {},
      methods: {
        handleClick(event) {

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
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.

Launch your project

Launch project