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,
},

// more props
thumbnail: {
  type: Object as () => { webp: string; jpg: string },
  validator: (val) => 'jpg' in val && 'webp' in val,
},
iframeAttributes: {
  type: Object as () => {},
},
webp: {
  type: Boolean,
  default: true,
},
autoplay: {
  type: Boolean,
  default: false,
},
thumbnailListeners: {
  type: Object as () => Record<string, Function | Function[]>,
},

Trigger an event after the Youtube video player is loaded.

videoLoaded: () => void

Preview:

Lazy Load Youtube Videos To Improve Load Speed

Changelog:

v1.2.2 (08/15/2020)

  • add size prop

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

Install & Download:

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

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

You Might Be Interested In:

Add Comment