Vidage
Your solution to full-screen background video and image combined.
Vidage.js will automatically handle your full-screen background video for you. It will hide and pause the video for touch devices and/or smaller width (34em) and instead show the fallback image that you should provide. It determines whether to do that or not on the canplay
and resize
events.
Demo
Take a look at this simple, yet - beautiful example.
Resources
Background video, fallback image and pattern overlay – that were used in example, are not included for download.
Use source file written in Sass src/styles/Vidage.scss
and change desired variables or change specific parts of code that you may not need for an specific project. If you're not familiar with SASS and would like to edit CSS instead, you can do that too. Distribution files are found within dist
folder and specifically full path to CSS is dist/styles/Vidage.css
.
Install
CDN
https://cdnjs.com/libraries/Vidage
Bower
bower install vidage --save
NPM
npm install vidage --save
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>
<head />
(make sure that file path is correct)
Add style in your <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);
Options
Vidage accepts a few options that you can pass through the object as second argument.
# | Option | Default | Type |
---|---|---|---|
1 | helperClass | Vidage--allow | string |
2 | videoRemoval | false | bool |
- Provided class will help Vidage to determine when to hide/show the background video or background image and when to pause/play the video.
- Forcefully removes the whole video element from the DOM and when necessery (e.g. on resize if larger width detected) it will append the removed video again.
Example:
import Vidage from './Vidage';
// Default options that you may change
new Vidage(selector, {
helperClass: 'Vidage--allow',
videoRemoval: false
});
Tested manually through multiple platforms and browsers!
15+ ✔ | 20+ ✔ | 5.1+ ✔ | 15+ ✔ | 12+ ✔ | 14.12+ ✔ | 10+ ✔ |
Thanks to BrowserStack for supporting this open-source project by allowing me to test Vidage!