• vue-lazy-youtube-video
  • Features
  • Installation
    • Via NPM
    • Via Yarn
    • Directly in browser
  • Initialization
    • As a global component
    • As a local component
    • SSR
    • As a plugin
  • Usage
  • Demo
  • API
    • Properties
    • Slots
    • Events
  • Tests
    • Unit
  • Development
  • Build
  • Powered by
  • Inspiration
  • License

• reduces initial load size by ~1.1MB per video
• built with a11y in mind – fully accessible via keyboard and to screen readers
• .webp thumbnail format for modern browsers that support it, with .jpg fallback for browsers that don't
• fully customizable through props and slots

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

$ yarn add vue-lazy-youtube-video

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-lazy-youtube-video@1.x"></script>
<script>
  // as a plugin
  Vue.use(VueLazyYoutubeVideo.Plugin)
  // as a component
  Vue.component('LazyYoutubeVideo', VueLazyYoutubeVideo.default)
</script>

⚠️ 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,
  },
}

There is special bundle for SSR users:

import Vue from 'vue'
import LazyYoutubeVideo, {
  Plugin,
} from 'vue-lazy-youtube-video/dist/vue-lazy-youtube-video.ssr.common'
// have to import ejected style directly, see this issue https://github.com/vuejs/rollup-plugin-vue/issues/266
import 'vue-lazy-youtube-video/dist/style.css'
// as a global component
Vue.component('LazyYoutubeVideo', LazyYoutubeVideo)
// or as a plugin
Vue.use(Plugin)
// or as a local component
export default {
  // ...
  components: {
    LazyYoutubeVideo,
  },
  // ...
}

⚠️ It must be called before new Vue().

import Vue from 'vue'
import { Plugin } from 'vue-lazy-youtube-video'
Vue.use(Plugin)

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

🚨 Value of the url property must be a DIRECT link to the video (e.g. https://www.youtube.com/watch?v=4JS70KB9GS0), but not the EMBED link (e.g. https://www.youtube.com/embed/4JS70KB9GS0). Component itself will generate appropriate src attribute for the <iframe /> element

The list of available props (with their types, default values and descriptions) is listed below:

Component provides some slots.

The list of available slots is listed below:

⚠️ Note, that when button slot is passed and this slot contains <button></button>, ones should not to forget to add aria-label (if this button contains only icon) and type="button" attributes. Also, if that button do not contain .y-video-button class, all default styles will be lost, so style concerns it's up to developer.

Jest is used for unit-tests.

Jest and VueTestUtils is used for unit tests.

You can run unit tests by running the next command:

npm run test:unit

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using npm run dev script

To build the production ready bundle simply run npm run build:

After the successful build the following files will be generated in the dist folder:

├── vue-lazy-youtube-video.common.js
├── vue-lazy-youtube-video.esm.js
├── vue-lazy-youtube-video.js
├── vue-lazy-youtube-video.min.js
├── vue-lazy-youtube-video.ssr.common.js

• Vue
• Rollup (and plugins)
• Babel
• Jest
• Vue Test Utils
• TypeScript

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

MIT