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:
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