Mobile-friendly Background Video Solution – Vidage.js

Category: Javascript , Recommended | October 24, 2022
Author:dvLden
Views Total:326 views
Official Page:Go to website
Last Update:October 24, 2022
License:MIT

Preview:

Mobile-friendly Background Video Solution – Vidage.js

Description:

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.

Installation:

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

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

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

4. Initialize the Vidage and done.

new Vidage('#VidageVideo');

5. Override the default fallback image.

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

Changelog:

v1.0.1 (10/24/2022)

  • Update

You Might Be Interested In:


Leave a Reply