Responsive Video Background Player for Vue 2 & 3 ⚡️

If you are looking to play videos in the background, you've found the right Vue package! 😜 (Heads up: No YouTube videos... yet!)

Prerequisites: Vue 2.x.x or Vue 3.x.x

Installation in 2 Steps

1: Add with npm 💻

 # For Vue 2.x.x
 npm install [email protected]

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

Nuxt.js v2.xx.x

Thanks to @skoulix for his instructions:

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

Now the component is globally available and can be used at any .vue file without issues.

Nuxt.js v3.xx.x

Thanks to @Vertenz for his instructions:

for NUXT 3 I used directive to make it work. Create plugins directory then add video-bg.client.ts (or any name but .client is obligatory for client side render, cause you don't have the window at ssr) file with

import { defineNuxtPlugin } from "#app";
import { Plugin } from "vue-responsive-video-background-player";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Plugin);
});

then you use the video-background tag

Usage - (or to make it runnable 🏃‍♂️)

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>

Demo ⚡️

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

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

• src (required: true)

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

Warning for Vue CLI: You need to bind the source like this: :src="require(`@/assets/video/timelapse.mp4`)". Read here why

• poster (default: '')

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

Warning for Vue CLI: You need to bind the source like this: :src="require(`@/assets/img/logo.png`)". Read here why

• sources (default: [])

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: '<your-mobile-video-path>.mp4', res: 638, autoplay: true, poster: '<your-mobile-background-image-path>.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.

• autoplay (default: true)

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 <video-background>, 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.

• loop (default: true)

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

• preload (default: auto)

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

• objectFit (default: cover)

So the video fits perfectly in the container

• objectPosition (default: center)

So the video fits exact position in the container

the value is also used as a poster background-position

• posterBgSize (default: cover)

So the poster fits perfectly in the container

Using the same values for objectFit and posterBgSize is recommended

• 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.

• playbackRate (default: 1.0)

The playbackRate property sets the current playback speed of the video. Example but negative values didn't work for me?

• transition (default: fade)

You can add your own transition styles here. If you set it to empty string, it won't show any transitions.

Events

• ready: Video is loaded
• playing: Video is playing
• paused: Video is paused
• 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(): Plays the video

• pause(): Pauses the video

• show(): Shows the video

• hide(): Hides the video and shows the poster

• load(): Loads the video

Security

If you discover any security problems, please, don't email me. (I'm a bit scared 😱) [email protected]

Credits

Now comes the best part! 😍 This package was inspired by:

• https://tesla.com

Wow, you really read all that?! If you enjoyed this, hit the ⭐️ button to give me a 🤩 face.

Changelog

v2.4.0

• Breaking Change: Removed $ prefix from private methods to prevent potential conflicts with other libraries (e.g., jQuery).
  The following methods have been renamed:

  • $_change_video_resolution → _change_video_resolution
  • $_innerWidth → _innerWidth

  If you were using these methods in your project, please update your code accordingly.

• Improved compatibility with legacy code and projects using jQuery.