Vue.js component for lazyloading YouTube videos.

? Usage

  <LazyYoutubeVideo url="[VIDEO_ID]" />

⚙️ Properties

Property Required Type Default Description
url true String Video url in format[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