Unr-lazy-youtube-video NPM

vue-lazy-youtube-video

Vue.js logo plus YouTube logo

a11y included.
.webp preview img format for modern browsers that support it, with .jpg fallback for browsers that don't.
reduced initial load size by ~1.1MB per video.

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

$ yarn add vue-lazy-youtube-video

It must be called before new Vue().

import Vue from 'vue'
import LazyYoutubeVideo from 'vue-lazy-youtube-video'

Vue.component('LazyYoutubeVideo', LazyYoutubeVideo)

import LazyYoutubeVideo from 'vue-lazy-youtube-video'

export default {
  name: 'YourAwesomeComponent',
  components: {
    LazyYoutubeVideo
  },
}

<template>
  <LazyYoutubeVideo url="https://www.youtube.com/watch?v=[VIDEO_ID]" />
</template>

Property	Required	Type	Default	Description
url	`true`	String		Video url in format `https://www.youtube.com/watch?v=[VIDEO_ID]`
alt	`false`	String	`'Video alternative image'`	Alternative text of the preview image
buttonLabel	`false`	String	`'Play video'`	`aria-label` attribute value of the play button. It improves a11y.
aspectRatio	`false`	String	`'16:9'`	Aspect ratio. It helps to save proportions of the video on different container sizes.
previewImageSize	`false`	String	`'maxresdefault'`	Size of the preview image, generated by YouTube. Available variants: `mqdefault`, `sddefault`, `hqdefault`, `maxresdefault`.

Name	Type	Usage
videoLoaded	`() => void`	The event that is triggered when the `<iframe>` is inserted into the DOM.

Jest is used for unit-tests.

You can run tests by typing this command in your console:

npm run test

Inspired by Vadim Makeev. Vadim created a comprehensive tutorial in which he shows how to lazyload YouTube videos properly.

4 years ago