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,
},
Trigger an event after the Youtube video player is loaded.
videoLoaded: () => void
Preview:
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
Last Update: September 5, 2019
Install:
# Yarn
$ yarn add vue-lazy-youtube-video
# NPM
$ npm install vue-lazy-youtube-video --save