Package Exports

unr-lazy-youtube-video

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (unr-lazy-youtube-video) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-lazy-youtube-video

Vue.js logo plus YouTube logo

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