A Vue 3 component to easily create a background video of either Relative, Absolute or Fixed position, allowing you to post content over the top.
npm install @devleaf-labs/vue-video-backgroundA component for Vue 3 to easily create a background video of either Relative, Absolute or Fixed position, allowing you to post content over the top. This component can accept multiple video sources, fallback image and even applies a fallback to iOS low power mode by using the playing event listener on component mounting to see if a pause happens.
The component also adheres to all browsers autoplay requirements with the following properties: playsinline autoplay muted loop
Install with NPM
```
npm i @devleaf-labs/vue-video-background`
Use in your project
`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| src | String | - | The source of the video you want to play |
| mime | String | 'video/mp4' | The MIME Type of the video you are trying to play |true
| fallback | String | - | A fallback image to display if the user is on low power mode or the video is loading |
| lowBatterySupport | Boolean | | Whether to support detection of iOS' Low Power Mode |'fixed' or 'relative' or 'absolute'
| position | | 'fixed' | The CSS position of the background video |:src
| multiSrc | Array | - | An array of multiple video sources to display (cannot use with and :mime properties [see multiple sources below]) |
prop, this takes an object of src and mime per video source and will place them in the order you pass them.For Example:
`
:multiSrc="[{ src: './link-to-webm-video.webm', mime: 'video/webm' }, { src: './link-to-mp4-video.mp4', mime: 'video/mp4 }]"
/>
`
Will provide two sources, one WebM and the other MP4.⚠️ Something to Note ⚠️
If you are using the
:multiSrc prop you should not use :src and :mime as this will conflict with the prior. This will be handled gracefully by prioritising the :multiSrc over the :src` but it should be seen as bad practice.