
We wrote an article for the SitePoint UX blog that lays down some guidelines for working with background videos.
We wrote an article for the SitePoint UX blog that lays down some guidelines for working with background videos.
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.
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.
We wrote a post for the Designrfix blog about how to improve your background videos with the jQuery Background Video plugin.
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:
background-size: cover;
/ object-fit: cover;
to stretch the video over it’s containing element and scale with it while maintaining aspect ratio.You can find the code and usage instructions on GitHub.
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.
Video backgrounds are becoming more and more popular in web design these days, for a number of reasons:
If done wrong, they can annoy your users with slow speeds, hard to read text, and distracting movements; however when done well they can be a great subtle touch that adds an extra layer of thoughtfulness to your design.
Before we start with the code, let’s just set some guidelines to avoid doing it the wrong way:
With those in mind, let’s get started.
The first problem you’ll encounter with HTML5 video is that different browsers support different encoding formats for video. Luckily, the <video>
tag supports adding multiple versions of your video, in different formats. So what formats should you include for the best browser compatibility? Right now for the best cross-browser support you should include three versions:
To convert your video file into these formats, we recommend using this free online HTML5 video converter. If you need help using the converter, there’s a demo video here: How to convert video to HTML5 compatible formats.
<video>
tagIf you converted your video using the tool provided in the first step, you’ll already have your video tag, but let’s run through what’s required so you understand what it entails. We’ll start with an example tag.
<video loop autoplay muted poster="path/to/screenshot.jpg"> <source src="path/to/video.webm" type="video/webm"> <source src="path/to/video.ogg" type="video/ogg"> <source src="path/to/video.mp4" type="video/mp4"> </video>
The <video>
tag can have a few attributes. We’ll only go over a few, but for a full list see MDN.
src
– the path to the video file. We won’t be using this because we’re using <source>
elements to declare multiple sources.poster
– the path to an image that will be displayed before the video starts playing. We’re definitely going to use this one, go ahead and grab a screenshot from your video, or if you’ve got a better photo to display – even better.autoplay
– whether to start playing the video automatically. This is a boolean attribute, so you can add it without a value, or as autoplay="autoplay"
. Omit the attribute entirely if you don’t want your video to autoplay.loop
– another self-explanatory boolean attribute.muted
– also boolean and self-explanatory. I recommend adding this to all video backgrounds to avoid annoying your users.We didn’t specify a src in our <video>
tag because we’ve got multiple video files (our aim is to get the best browser support). Instead, we’re adding <source>
elements as children of the <video>
element. Each <source>
tag has a src
attribute and a type
attribute. type
is optional, but highly recommended, as it helps the browser decide which video file to play without downloading a bit of each of them.
So our tag is complete. Try adding it to your page and it will look something like this:
<video>
tag as a backgroundNow that our video is working, it’s time to position it. The following method will stretch the video over any containing element, which means you can use it as a full-screen background, or the background of a layer or module – whatever your design calls for. We’re going to make it the background of a ‘callout’ layer in our page design.
First, the HTML:
<section class="callout"> <div class="video-bg"> <video autoplay loop muted poster="path/to/poster.jpg"> <source src="path/to/webm.webm" type="video/webm"> <source src="path/to/ogg.ogg" type="video/ogg"> <source src="path/to/mp4.mp4" type="video/mp4"> </video> </div> <div class="video-overlay"></div> <div class="callout-inner"> <!-- Our callout content goes here --> </div> </section>
The callout section spans the width of the screen, which means the video and video overlay need to do the same. The elements inside the callout are ordered so that each appears above the previous layer. The inner section is centred and only as wide as the content inside. Here’s the corresponding CSS:
.callout { position: relative; overflow: hidden; } .video-bg, .video-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; } .video-overlay { background: rgba(0,0,0,0.5); pointer-events: none; /* Allows right clicking on the video to pause etc */ } .video-bg video { min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .callout-content { position: relative; text-align: center; margin: 50px 0; /* This adds some space around the video */ color: #FFF; text-shadow: 0 0 5px rgba(0,0,0,0.4); }
What’s happening here? First the .callout
div is given a relative position so that it’s child elements can be positioned relative to it. It’s also given overflow: hidden;
to prevent the video from visually overflowing it’s container.
Then the .video-bg
and .video-overlay
divs are made to take up the whole area of the container using absolute positioning.
The .video-overlay
div is given a semi-transparent background to make the content of the callout easier to read. If you don’t want this, feel free to completely remove the div from your HTML.
The .callout-content
div has been given some example styles. What goes here is up to your design.
The video itself is the tricky part. First we give it a minimum width and height of 100% to ensure it always is at least as large as it’s container. Then the width
properties are set to auto
so that they remain in proportion with each-other. From there it’s simply a matter of positioning the video in the centre of it’s container. We’ve chosen to use absolute positioning along with transform: translate(-50%, -50%);
. This is necessary because we don’t know exactly how large our video is going to be. This will work in IE9 and up (you should also pass this through an auto-prefixer for the best browser support). The result of all this is a video that will always be centred at least as wide and high as it’s container.
We’ve now got essentially what we came here for. Some might be happy leaving it as-is, but there are a few problems:
poster
to the first frame of the video, and it might look a bit jerky (remember this is one of the things we wanted to avoid).The approach I take to smooth the transition from poster to first frame is to give the video opacity: 0;
then attach an event in JavaScript to transition to full opacity when the video starts playing. This does mean that the poster will never be visible, but that’s fine – we’ll just remove it and instead add it as a background-image
to our .video-bg
div.
Here’s what that looks like (important parts only).
HTML – remove the poster attribute and add a class telling it to fade in:
<video class="fade-in-video" autoplay loop muted>
CSS – add the poster as a background image instead, and styles for the opacity classes:
.video-bg { ... background: url(path/to/poster.jpg) center center no-repeat; background-size: cover; /* Should be run through an auto-prefixer */ } .fade-in-video { opacity: 0; transition: opacity .8s linear; } .fade-in-video.is-playing { opacity: 1; }
JavaScript – add the .is-playing class when the video starts:
var fade_in_videos = document.querySelectorAll('.fade-in-video'); for( i=0; i<fade_in_videos.length; i++ ) { fade_in_videos[i].addEventListener("playing", function(){ this.className += ' is-playing'; }); }
This JavaScript allows for multiple background videos on your page, and should be placed after all your video tags, or if you’re using jQuery, inside $(document).ready()
.
To my knowledge, there’s no way around the problems iOS throws up around background images, so I’ve found it best to just remove the video element entirely on iOS. After all, background videos are only an enhancement, they’re not required to get our point across (and if yours is, you should re-think it).
Just add to your JavaScript:
var iOS = /iPad|iPhone|iPod/.test(navigator.platform); if( iOS ) { var background_videos = document.querySelectorAll('.video-bg video'); for( i=0; i<background_videos.length; i++ ) { background_videos[i].parentNode.removeChild(background_videos[i]); } }
We’re done, and you earned it 🙂