Responsive Video Background Player for Vue Component Plugin

A responsive video background player is a responsive video back ground component that dynamically adjusts the video resolution according to the screen size.

If you are looking to play videos in the background, you have found the best Vue pack for it 😜 (Currently no YouTube videos).

responsive video background html css, background video html template, responsive youtube video background, vue js video player with playlist, vuetify video background

Table of Contents

How to make use of it:

Install and download:

# NPM
$ npm install vue-responsive-video-background-player --save

1. Install and import the component.

import VideoBackground from 'vue-responsive-video-background-player'
Vue.component('video-background', VideoBackground);

2. Create a video background on 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. Props are available.

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',
}

Events

ready: Video is loaded
playing: Video is playing
error: Video error
loading: Video is loading
ended: Video finished, only when loop is set to false

Methods

If you happen to need more control over the player, you can use the internal methods. For that, you need to set ref=videobackground to the HTML tag <video-background>. After that you can call all methods like this this.$refs.videobackground.player.play().

play(): Video is playing
pause(): Video is paused
show(): Video is shown
hide(): Video is hidden, the poster is shown
load(): Video is loaded

Responsive Video Background Component Plugin/Github