Responsive Background Video & Image Plugin - Anamorph.js

Responsive Background Video & Image Plugin - Anamorph.js
File Size: 9.02 KB
Views Total: 120
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

See Also:

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.

anamorph('https://www.youtube.com/embed/GvDYGxx_8e0', 'bw');

This awesome jQuery plugin is developed by Squls. For more Advanced Usages, please check the demo page or visit the official website.