vue-lazy-youtube-video

Features

• 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.

💿 Installation

Via NPM

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

Via Yarn

$ yarn add vue-lazy-youtube-video

Initialization

As a global component

It must be called before new Vue().

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

Vue.component('LazyYoutubeVideo', LazyYoutubeVideo)

As a local component

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

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

🚀 Usage

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

Demo

⚙️ Properties

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.

⚙️ Events

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

💉 Tests

Jest is used for unit-tests.

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

npm run test

Powered by

• Babel
• Webpack 4
• Vue
• SASS

Inspiration

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

🔒 License

MIT