hanwenjack / vidage Goto Github PK

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 (probably not necessery) events. It uses one module as dependency - lodash/debounce.

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

https://cdnjs.com/libraries/Vidage

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 ]);