Mobile-friendly Background Video Solution – Vidage.js

Category: Javascript , Recommended | October 24, 2022
Views Total:409 views
Official Page:Go to website
Last Update:October 24, 2022


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.


# Yarn
$ yarn add @dvlden/vidage
$ 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.


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">

4. Initialize the Vidage and done.

new Vidage('#VidageVideo');

5. Override the default fallback image.

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


v1.0.1 (10/24/2022)

  • Update

You Might Be Interested In:

Leave a Reply