Mobile-friendly Background Video Solution – Vidage.js

Preview:

Description:

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.

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

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">
  </video>
  <div class="Vidage__backdrop"></div>
</div>

Initialize the Vidage and done.

new Vidage('#VidageVideo');

Changelog:

v0.5.1 (08/20/2018)

• Update