A responsive video background component that dynamically adjusts the video solution depending on the screen size.
How to use it:
1. Install and import the component.
import VideoBackground from 'vue-responsive-video-background-player'
Vue.component('video-background', VideoBackground);
2. Create a video background in the template.
<video-background
src="bg.mp4"
poster="poster.jpg"
:sources="[
{src: '900>.mp4', res: 900, autoplay: true},
{src: '640.mp4', res: 638, autoplay: true, poster: 'mobile-poster.png'}
]"
style="max-height: 100%; height: 100vh;"
overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)"
>
<h1>VueScript.com</h1>
</video-background>
3. Available props.
sources: {
type: Array,
default() {
return [];
},
validator: sourcesValidator,
},
autoplay: {
type: Boolean,
default: true,
},
poster: {
type: String,
default: '',
},
overlay: {
type: String,
default: '',
}
4. Available props for the video player.
src: {
type: String,
required: true,
},
muted: {
type: Boolean,
default: true,
},
loop: {
type: Boolean,
default: true,
},
preload: {
type: String,
default: 'auto',
},
objectFit: {
type: String,
default: 'cover',
},
playsWhen: {
type: String,
default: 'canplay',
note: 'Google HTML Video Events',
}
Preview:
Changelog:
v2.2.0 (07/16/2021)
- Updated package
v2.1.2 (12/29/2020)
- Fix objectFit
v2.1.1 (12/01/2020)
- Added Video fading
v2.0.2 (11/29/2020)
- Fixed emit and updated npm
v2.0.0 (10/26/2020)
- Release for Vue 3.x.x
v1.1.3 (10/25/2020)
- Working towards Vue 3.0
v1.1.1 (06/27/2020)
- Fixes MediaType detection
Download Details:
Author: avidofood
Live Demo: https://avidofood.github.io/vue-responsive-video-background-player/
Download Link: https://github.com/avidofood/vue-responsive-video-background-player/archive/master.zip
Official Website: https://github.com/avidofood/vue-responsive-video-background-player
Install & Download:
# NPM
$ npm install vue-responsive-video-background-player --save