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
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.
videoLoaded: () => void
Preview:
Changelog:
v2.3.0 (10/24/2020)
- feat: add parameters 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