Welcome folks today in this  blog post we will be showing that how to play responsive background videos using video player in vue.js and nuxt.js using vue.responsive-video-background-player library in javascript. All the full source code of the application is given below.

Live Demo

https://avidofood.github.io/vue-responsive-video-background-player/

Installation

1: Add with npm 💻

 # For Vue 2.x.x
 npm install vue-responsive-video-background-player@1.2.2

# For Vue 3.x.x
 npm install vue-responsive-video-background-player

2a: Install as a component

 import VideoBackground from 'vue-responsive-video-background-player'

 Vue.component('video-background', VideoBackground);

2b: Install as a plugin

 import { Plugin } from 'vue-responsive-video-background-player'

 Vue.use(Plugin);

3: Only for Nuxt.js users)

Again this is only for Nuxt.js users. Gridsome users click here. At your nuxt.config.js locate the part where you declare your plugins and import the file. Example:

plugins: [
  {
    src: '~/plugins/vue-video-background',
    ssr: false
  }
]

Usage

Easiest version 🔍

 <video-background 
    src="<your-video-path>.mp4"
    style="max-height: 400px; height: 100vh;"
 >
    <h1 style="color: white;">Hello welcome!</h1>
 </video-background>

Advanced version 🌐

 <video-background 
    src="<your-default-video-path>.mp4"
    poster="/images/mainfoto.jpg"
    :sources="[
        {src: '<your-tablet-video-path>.mp4', res: 900, autoplay: true}, 
        {src: '<your-mobile-video-path>.mp4', res: 638, autoplay: true, poster: '<your-mobile-background-image-path>.png'}
    ]"
    style="max-height: 400px; height: 100vh;"
    overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)" 
>
    <h1 style="color: white;">Hallo welcome!</h1>
</video-background>

Screenshot

Official Github Repository