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

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