unr-lazy-youtube-video

[Not Official Repo] - I forked this to mess around. Vue.js component for lazyloading YouTube videos

Usage no npm install needed!

<script type="module">
  import unrLazyYoutubeVideo from 'https://cdn.skypack.dev/unr-lazy-youtube-video';
</script>

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

Edit vue-lazy-youtube-video

⚙️ 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