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
.
Take a look at this simple, yet - beautiful example.
https://cdnjs.com/libraries/Vidage
Thanks to PeterDaveHello
bower install vidage --save
npm install vidage --save
<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:
<script src="scripts/Vidage.min.js"></script>
<script>
new Vidage(selector [, helperClass ]);
</script>
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!