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.

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

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.

https://cdnjs.com/libraries/Vidage

bower install vidage --save

npm install vidage --save

You don't have to add both .webm and .mp4 formats. But from my personal experience, 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>

<link href="styles/Vidage.css" rel="stylesheet" />

<script src="scripts/Vidage.js"></script>
<script>
    new Vidage(selector);
</script>

import Vidage from './Vidage';

new Vidage(selector);

Vidage accepts a few options that you can pass through the object as second argument.

1. Provided class will help Vidage to determine when to hide/show the background video or background image and when to pause/play the video.
2. 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!