Responsive Background Video & Image Plugin - Anamorph.js

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 JavaScript 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:

• 10 Best Video Background Plugins In JavaScript

How to use it:

1. Download and import the minified version of the Anamorph.js into the document.

<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
• random: Randomize the start point
• start: Start point in seconds
• end: End point in seconds
• backup: Background image to display on mobile & tablet devices.

let properties = {
    media: '/path/to/video.mp4',
    overlay: 0.5,
    random: true,
    start: 100,
    end: 300,
    backup: 'bg.jpg'
}
anamorph(properties);

3. The plugin also supports Youtube videos.

let properties = {
    media: 'https://www.youtube.com/embed/VIDEO-ID',
    // more props here
}
anamorph(properties);

Changelog:

2023-06-30

• Removed jQuery dependency

---

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