|File Size:||9.02 KB|
|Official Website:||Go to website|
It's hard to improve your conversion rate, users engagement and social media shares if your site is using a giant white, fullscreen background.
Anamorph.js is a tiny jQuery plugin that makes it easy for you to use HTML5 or Youtube videos as backgrounds on your website, instead of regular images. It falls back to background images on mobile and tablet devices as they don't support video autoplay. A custom background overlay will give a professional look and feel to the website and keep the page content visible at all times.
How to use it:
1. Download and import the minified version of the Anamorph.js into the document.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/src/anamorph.min.js"></script>
2. Add a video background to your page using the
anamorph method. Available parameters:
- media: path to the video
- overlay: Overlay opaticy from 0 to 1. Or set the parameter to 'bw' to use black and white background
- fallbackImg: Background image to display on mobile & tablet devices.
// anamorph(media, overlay, fallbackImg); anamorph('1.mp4', 0.8, "fallback.jpg");
3. The plugin also supports Youtube videos.