Vidage

Your solution to full-screen background video and image combined.

---

Vidage.js will automatically hide and pause the video for touch devices and/or small screens (34em) and instead show the fallback image. It determines whether to do that or not, on the canplay, resize and orientationchange events. It uses one module as dependency - lodash/debounce.

Demo

---

Take a look at this simple, yet - beautiful example.

Install

---

CDN

https://cdnjs.com/libraries/Vidage

Thanks to PeterDaveHello

Bower

bower install vidage --save

NPM

npm install vidage --save

How to use

---

Add boilerplate/template in your 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>

And then use the script on one of the following ways:

Regular way

<script src="scripts/Vidage.min.js"></script>
<script>
    new Vidage(selector [, helperClass ]);
</script>

ES6 way

import Vidage from './Vidage';

new Vidage(selector [, helperClass ]);

Tested manually through multiple platforms and browsers!

15+ ✔	20+ ✔	5.1+ ✔	15+ ✔	12+ ✔	14.12+ ✔	Noop ✘

Unfortunately, I was unable to determine the issue on Internet Explorer. It just shows up the cover image, but never plays the video. :'(

If anyone can track down the issue, I'd appreciate the help!

Thanks to BrowserStack for supporting this open-source project by allowing me to test Vidage!