Lazy Load Youtube Videos To Improve Load Speed


A Youtube Video lazy loader for Vue.js that lazy loads Youtube video players until the user clicks/taps the thumbnails.

Supports webp preview image and fallbacks to JPG for legacy browsers.

Also provides a property to customize the aspect ratio you want to use.

How to use it:

Install and import the LazyYoutubeVideo component.

Vue.component('LazyYoutubeVideo', LazyYoutubeVideo)

Register the component.

Vue.component('LazyYoutubeVideo', LazyYoutubeVideo)

Create the LazyYoutubeVideo component and define the path to the Youtube video.

  <LazyYoutubeVideo url=" ID HERE" />

Possible props.

// video url
url: {
  type: String,
  required: true,
  validator: value => {
    return value.indexOf('') !== 1

// image alternative text
alt: {
  type: String,
  default: 'Video alternative image',

// custom button label
buttonLabel: {
  type: String,
  default: 'Play video',

// aspect ratio
aspectRatio: {
  type: String,
  default: '16:9',
  validator: value => {
    const pattern = /^\d+:\d+$/
    return pattern.test(value)

// set the image size
previewImageSize: {
  type: String,
  default: 'maxresdefault',
  validator: value =>
    ].indexOf(value) !== -1,

Trigger an event after the Youtube video player is loaded.

videoLoaded: () => void


Lazy Load Youtube Videos To Improve Load Speed

Download Details:

Author: andrewvasilchuk

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-lazy-youtube-video

$ npm install vue-lazy-youtube-video --save

You Might Be Interested In:

Add Comment