Mobile-friendly Background Video Solution – Vidage.js

Category: Javascript , Recommended | August 20, 2018
Views Total:2,141 views
Official Page:Go to website
Last Update:August 20, 2018


Mobile-friendly Background Video Solution – Vidage.js


Vidage.js a lightweight JavaScript library which 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.

How to use it:

Load the Vidage’s JavaScript and Stylesheet as follows:

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

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


Insert HTML5 videos into your webpage’s background.

<div class="Vidage">
  <div class="Vidage__image"></div>
  <video id="VidageVideo" class="Vidage__video" preload="metadata" loop autoplay muted>
    <source src="1.ogg" type="video/ogg">
    <source src="1.mp4" type="video/mp4">
  <div class="Vidage__backdrop"></div>

Initialize the Vidage and done.

new Vidage('#VidageVideo');


v0.5.1 (08/20/2018)

  • Update

You Might Be Interested In:

Leave a Reply