Responsive Video Background Player for Vue

Responsive Video Background Player for Vue – Do you want to add video as background on your web page is next level for creating dynamic page. you can easily add your intro video on your web page as background so that your visitor can easily watch into video on page load.

Installation in 2 Steps

1: Add with npm ?

 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);

Usage – (or to make it runnable ?‍♂️)

Easiest version ?

Advanced version ?

Props

This package is for responsive videos depicting different video resolution. Have you ever visited my favorite car company Tesla? Have a look, they use a lot of video background videos and are using different resolutions for each device.

Props values

This is your path to your video. You can just use this value for showing your video in every resolution.

This is your first background image that is shown before the video is loaded.

This is the main reason for this package. I wanted to have the possibility to change the resolution of the video when the resize event is fired.

To make it work, sources is an array that contains objects. For example:

[{src: '.mp4', res: 638, autoplay: true, poster: '.png'}]

To make it work you need at least src, res, autoplay.

poster is optional.

res stand for resolution. This example means that between 0px and 638px of the window’s width only the mobile video will be shown. After that your default src.

The video is going to be played immediately when the video is ready. If you are setting it to false, you can start the video just by this.$refs.videobackground.player.play(). But remember to set ref=videobackground to the html tag , so that it can work.

• overlay (default: '')
  If you love overlays, then copy the overlay from the advanced example.

• muted (default: true)

Warning. Videos are perhaps not played when unmuted.

Loops through the video. You can catch the event ended to show only the poster.

https://www.w3schools.com/tags/att_video_preload.asp

• objectFit (default: cover)

So the video fits perfectly in the container

• playsWhen (default: canplay)

This is important, if you know that you might have users with bad internet speed, you should definetly use canplaythrough. Learn more in 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

See live demo and download source code.

This awesome script developed by avidofood. Visit their official repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Related