Vidage.jswill 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
(probably not necessery) events. It uses one module as dependency - lodash/debounce
.
Take a look at this simple, yet - beautiful example .
bower install vidage --save
npm install vidage --save
You may use Vidage on one of the following ways:
<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>
<script src="scripts/Vidage.min.js"></script> <script> new Vidage(selector [, helperClass ]); </script>
import Vidage from './Vidage'; new Vidage(selector [, helperClass ]);