Vue.js component for lazyloading YouTube videos

vue-lazy-youtube-video

Vue.js component for lazyloading YouTube videos.

? Usage

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

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

GitHub