Home > Other > Vidage.js – Responsive Full-screen Background Video Solution
Vidage.js – Responsive Full-screen Background Video Solution

Vidage.js – Responsive Full-screen Background Video Solution

Vidage.js a small JavaScript library which allows you to fullscreen background videos your webpage and also features automatically hide and pause the video for touch devices and/or small screens for your webpage. Plugin fallback that uses a fullscreen background image instead of video to  save bandwidth on mobile devices.

How to use


Add boilerplate/template in your HTML

You don’t have to add both .webm and .mp4 formats. But from my personal experiance, leaving .mp4 as fallback and using .webm primarily Works better and smoother in browsers that supports .webm format

<div class="Vidage">
    <div class="Vidage__image"></div>

    <video id="VidageVideo" class="Vidage__video" preload="metadata" loop autoplay muted>
        <source src="videos/bg.webm" type="video/webm">
        <source src="videos/bg.mp4" type="video/mp4">
    </video>

    <div class="Vidage__backdrop"></div>
</div>
Add style in your <head /> (make sure that file path is correct)
<link href="styles/Vidage.css" rel="stylesheet" />
And then use the script on one of the following ways (make sure that file path is correct)
Regular way
<script src="scripts/Vidage.js"></script>
<script>
    new Vidage(selector);
</script>
ES6 way
import Vidage from './Vidage';

new Vidage(selector);
  Website Demo

About admin