We wrote an article for the SitePoint UX blog that lays down some guidelines for working with background videos.
10 Guidelines for Better Website Background Videos
Category: Resources
WordPress Plugin: Video Backgrounds for SiteOrigin Page Builder
Today we’re releasing another WordPress background video plugin. This time it’s an add-on for the popular SiteOrigin Page Builder plugin.
The plugin allows you to set a background video on any Page Builder row, and gives options for adding an overlay (colour or pattern), a pause/play button, and some other minor settings.
Background Video Addon for Visual Composer
We’ve released a free background-video addon for the popular WordPress drag-and-drop page builder, Visual Composer.
The plugin allows you to set a background video for any Visual Composer row, along with an optional semi-transparent overlay.
jQuery Background Video – a jQuery plugin for better HTML5 background videos
Today we released jQuery Background Video, a jQuery plugin that makes your background videos better with a single line of code.
jQuery Background Video makes the following improvements to any background videos you call it on:
- Imitates
background-size: cover;/object-fit: cover;to stretch the video over it’s containing element and scale with it while maintaining aspect ratio. - Destroys the background video on iOS (which doesn’t play nice with background videos) and prevents the video files from downloading.
- Optionally fades-in your video when it starts playing, like we do on BG Stock, to avoid any distracting sudden movements (background videos are all about subtlety).
You can find the code and usage instructions on GitHub.
Improving the look of low quality images and videos with pattern overlays
Sometimes you’re in a position where you need to display a low quality image or video and make it appear high quality. This could be because you don’t have access to a higher quality asset, or perhaps you need to account for people with very slow connection speeds. The situation can be frustrating, as a low quality asset can make your whole page look low quality. Thankfully there’s a trick you can use to hide the poor quality of your asset – adding a pattern overlay.
A pattern overlay helps to hide the artefacts in a low quality asset, and make it look sharper than it really is.
We’ve put together some free pattern overlays for you, and a demo page to help you choose.