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