August 13, 2022

Vue.js Component For Lazyloading YouTube Videos

Vue lazy youtube video is a lazy Youtube Video loader for Vue.js that loads lazy Youtube video players until the user clicks/clicks on the thumbnails.

Supports webpage preview image and JPG backups for old browsers. It also provides a feature to customize the aspect ratio you want to use.

vue lazy load youtube embed, how to lazy load youtube video, load youtube video after page load, lazy load video jquery, vuejs lazy loading example

How to make use of it:

Install and download:

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

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

1. Install and import the LazyYoutubeVideo component.

Vue.component('LazyYoutubeVideo', LazyYoutubeVideo)

2. Component Register.

Vue.component('LazyYoutubeVideo', LazyYoutubeVideo)

3. Create the LazyYoutubeVideo component and specify the path to the Youtube video.

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

4. 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: () => ({}),
},

5. Trigger an event after loading a Youtube video player.

videoLoaded: () => void

Lazy Load Youtube Videos To Improve Load Speed, vue lazy youtube video Plugin/Github


See Demo And Download

Official Website(andrewvasilchuk): Click Here

This superior jQuery/javascript plugin is developed by andrewvasilchuk. For extra Advanced Usages, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.