Fullscreen HTML5 Video Background – Vidage.js

The Vidage.js is thin Javascript library which provides solutions to create fullscreen HTML5 video background. It will automatically handle full-screen for your video and also work with images.

You can implement it on any kind of website. It’s work well on all type of mobile devices and easy to customize. You can easily combine the video & image on the same page.

A little drawback it’s didn’t support youtube video as the background so you can only put HTML5 video to make work this plugin.

It supports hide and pause video functions on the touch devices and provides fallback image instead. It is responsive and works well on mobile and window browsers.

Basic Usage

Load the stylesheet and Javascript as following in the head.

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

Insert video into your webpage’s by using a video tag. First, define the main container with class name vidage and then you can define video tag. You can also add a video image and backdrop.

The HTML

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

The Javascript

Initialize the Vidage function and you are done.

<script>
        new Vidage('#VidageVideo');
</script>