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