Lazy Load Youtube Videos To Improve Load Speed

Description:

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.

<template>
  <LazyYoutubeVideo url="https://www.youtube.com/watch?v=VIDEO ID HERE" />
</template>

Possible props.

// video url
url: {
  type: String,
  required: true,
  validator: value => {
    return value.indexOf('https://www.youtube.com/watch?') !== 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 =>
    [
      'default',
      'mqdefault',
      'sddefault',
      'hqdefault',
      'maxresdefault',
    ].indexOf(value) !== -1,
},

Trigger an event after the Youtube video player is loaded.

videoLoaded: () => void

Preview:

Lazy Load Youtube Videos To Improve Load Speed

Download Details:

Author: andrewvasilchuk

Live Demo: https://codesandbox.io/s/x7nrwxq6qo

Download Link: https://github.com/andrewvasilchuk/vue-lazy-youtube-video/archive/master.zip

Official Website: https://github.com/andrewvasilchuk/vue-lazy-youtube-video

Last Update: September 5, 2019

Install:

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

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

You Might Be Interested In:

Add Comment