Lazy Load Youtube Videos To Improve Load Speed

Install & Download:

# Yarn
$ yarn add vue-lazy-youtube-video
# NPM
$ npm install vue-lazy-youtube-video --save

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)

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
src: {
  type: String,
  required: true,
  validator: (value) =>
    startsWith(value, 'https://www.youtube.com/embed/') ||
    startsWith(value, 'https://www.youtube-nocookie.com/embed/'),
},
alt: {
  type: String,
  default: DEFAULT_ALT_ATTRIBUTE,
},
buttonLabel: {
  type: String,
  default: DEFAULT_BUTTON_LABEL,
},
aspectRatio: {
  type: String,
  default: DEFAULT_ASPECT_RATIO,
  validator: isAspectRatio,
},
previewImageSize: {
  type: String,
  default: DEFAULT_PREVIEW_IMAGE_SIZE,
  validator: (value: any) => PREVIEW_IMAGE_SIZES.indexOf(value) !== -1,
},
thumbnail: {
  type: Object as PropType,
  validator: (val) => 'jpg' in val && 'webp' in val,
},
iframeAttributes: {
  type: Object as PropType<Record<string, string | boolean | number>>,
},
webp: {
  type: Boolean,
  default: true,
},
autoplay: {
  type: Boolean,
  default: false,
},
thumbnailListeners: {
  type: Object as PropType<Record<string, Function | Function[]>>,
},
enablejsapi: {
  type: Boolean,
  default: false,
},
playerOptions: {
  type: Object as PropType,
  default: () => ({}),
},
injectPlayerScript: {
  type: Boolean,
  default: false,
},
parameters: {
  type: Object as PropType,
  default: () => ({}),
},

Trigger an event after the Youtube video player is loaded.