Vue.js Nuxt.js Responsive Background Video Player Using vue-responsive-video-background-player Library in Javascript Full Project For Beginners

Vue.js Nuxt.js Responsive Background Video Player Using vue-responsive-video-background-player Library in Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

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
  }
]

 

See also  Vue.js Vuetify Swipe Gesture List Cards Slider Using Swiper Library in Javascript Full Project For Beginners

 

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

 

Leave a Reply