Mobile-friendly Background Video Solution – Vidage.js

Vidage.js a lightweight JavaScript library that allows for HTML5 videos to be used as a background for your webpage.

The plugin also has a fallback that uses a fullscreen background image instead of video to save bandwidth on mobile devices.

Installation:

# Yarn
$ yarn add @dvlden/vidage
# NPM
$ npm i @dvlden/vidage

How to use it:

1. Load the Vidage’s JavaScript and Stylesheet as follows:

<link href="Vidage.css" rel="stylesheet">
<script src="Vidage.min.js"></script>

2. Prepare the fallback image and set the correct path in the Vidage.css.

.Vidage__image{background-image:url(bg.jpg);

3. Insert HTML5 videos into your webpage’s background.

<div class="vidage">
  <video id="vidage" class="vidage-video" preload="metadata" loop autoplay muted>
    <source src="bg.webm" type="video/webm">
    <source src="bg.mp4" type="video/mp4">
  </video>
</div>

4. Initialize the Vidage and done.

new Vidage('#VidageVideo');

5. Override the default fallback image.

.vidage::before {
  background-image: url('bg.jpg');
}

Changelog:

v1.0.1 (10/24/2022)

• Update