Better Website Background Videos With jQuery

Better Website Background Videos With jQuery

Web designers have been using background videos in their designs for a number of years now, but until recently they were still fairly uncommon. In the last year or two, that’s started to change, and background videos are rapidly becoming a common feature in great designs.

There are a few reasons why:

  • People’s internet connections are generally getting faster, and their data caps higher, so video content is less of a burden on the user.
  • The HTML5 video tag is reaching a point where it’s quite well supported.
  • New video encoding formats such as Webm, and improvements to old ones like MP4, mean video can be compressed to a smaller size and higher quality than ever before, opening the door to faster streaming.

The reasons listed here will only become more pertinent with time, so I predict we’re going to start seeing a lot more background videos in the near future.

First, some things to avoid

Before we dive in to the meat of this article, let’s go over a few things you should NOT do.

  • Make sure the video has a bitrate that will suit the bulk of your users’ internet speeds. It’s tempting to use a high quality 1080p video, which will look great, but unless you expect most of your users to be on super-fast internet, we should go with 720p and the lowest bitrate that you think looks acceptable. Low quality can sometimes be hidden quite effectively with patterned overlays, too.
  • Make sure that if there’s text positioned over the video, there’s enough contrast for it to be easily readable.
  • Avoid unstable video and excessive or fast panning, which would distract from the actual website content, and could even make your users feel sick or uneasy.
  • Limit your video’s length to at most 30-40 seconds, which should come in under 5MB depending on your chosen bitrate.

By avoiding these few mistakes, you’ll end up with a nice, subtle design touch that doesn’t impede on the usability and accessibility of your website.

The problem with pure HTML and CSS background videos

It’s possible to achieve a pretty good background video without any JavaScript enhancements at all, but there are a few little problems that we really should fix to ensure a good experience for all our users:

  • Unless the user’s browser supports the object-fit CSS property (see browser support here, short story: no IE support), we can’t ensure the video always stretches to fill the space it’s assigned to.
  • iOS refuses to auto-play videos, and will add it’s own play button, which when tapped will open the device’s media player. For embedded videos this is fine, but for background videos we’d prefer to fall back to a background image.
  • The video starts playing quite suddenly once it’s ready, which can be distracting to the user.
  • If we’re looping the video, the browser will loop it forever. It would be better to pause the video after a given amount of time, to be easier on the user’s CPU and power usage.
  • There’s no way to pause and play the video by default.

JavaScript can solve all these problems

With JavaScript we can:

  • Mimic the object-fit property
  • Detect iOS devices and destroy the video node
  • Fade the video in slowly once it starts playing
  • Set a timer when the video starts, and check it every second to see if we should pause the video
  • Add a pause/play button to control playback

Each of these things can be done with vanilla JavaScript and the HTML5 video api, but why go to all that trouble when we can do it in a single line, with jQuery Background Video.

Introducing jQuery Background Video

jQuery Background Video takes the pain out of adding these enhancements and fallbacks for your users, and provides you with the options required to customize them. It was developed by the folks over at BG Stock, who know a thing or two about background videos (disclaimer: I’m one of those folks).

Basic Usage

Installing jQuery Background Video is as easy as including jQuery and the plugin in your HTML, including the plugin CSS, then calling the plugin on your video elements.

<link rel="stylesheet" type="text/css" href="path/to/jquery.background-video.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="path/to/jquery.background-video.js"></script>
<script>
$(document).ready(function(){
    $('.my-background-video').bgVideo();
});
</script>

Setting the Plugin Options

By default, the plugin will:

  • NOT be set to full screen mode
  • Fade in for 500 milliseconds as it starts playing
  • Play for 2 minutes before pausing
  • Fade back out after the 2 minutes is up
  • Create a pause/play button and place it in the upper right corner of the video

Each of these can be overridden in your function call. Let’s say we want the video to be full-screen, we want it to fade in for a full 2 seconds and continue playing for 5 minutes before pausing, and we want the pause/play button to sit in the bottom left corner of our screen. Easy! Here’s our new function call:

<script>
$(document).ready(function(){
    $('.my-background-video').bgVideo({
        fullScreen: true,
        fadeIn: 2000, // 2 seconds in milliseconds
        pauseAfter: 300, // 5 minutes in seconds
        pausePlayXPos: 'left',
        pausePlayYPos: 'bottom'
    });
});
</script>

The full plugin options can be found on Github.

Overriding options with data attributes

Like most jQuery plugins, the function call can work on all your background videos with a single call if you give them a common class and use that as the jQuery selector. However you might come across a situation where you want all your videos to have the same options set, except one or two that have some different options (for example you might want to move the pause/play button for a certain video). Usually you’d have to use a different class for this video and write a separate function call for it, but with jQuery background video you can override options on a per-video basis by including them as data attributes on your video tag. Just take the option name, change the camel case to ‘lowercase-with-dashes’ and prefix them with ‘data-bgvideo-‘ on your video tag. For example:

<video data-bgvideo-pause-play-x-pos="right" data-bgvideo-pause-play-y-pos="top" [[other video params]]>

In Conclusion…

Background videos are a great way to add a subtle design touch and extra layer of thoughtfulness to your website, but make sure you avoid the common pitfalls, and patch the browser’s shortcomings. jQuery Background Video is a quick and easy way to do so.

Posted in jQuery
Don't Miss Out On Deals Or Updates!
Be the first to find out what Designrfix has to offer. Signup to our newsletter for all the latest Top Designer Resources, Tech Products and Giveaways.

Written by Angus Russell

Angus Russell is a co-founder of BG Stock - a stock video library specifically for website background videos. He's constantly learning more about video on the web, and loves sharing his knowledge through tutorials, articles and even free plugins and resources.