News

Integrate fullscreen video backgrounds using BigVideo.js

It’s now easier than ever to give your website a full-motion background, using the power of HTML5 video

BigVideojs2

We’ve come a long way on the web since the days of table-based layouts. In the past 15 years there’s been a fundamental shift from static, fixed and low-interactivity designs to more intelligent, friendly and tactile user interfaces. This change has been driven by many advances in the environment web designers work within – from hardware improvements in the typical computer to the introduction of touchscreen smartphones and software enhancements such as modern, HTML5-compliant web browsers.

While this change has driven forward many changes in the way we create and view content on the web, one of the technologies that looked set to make the biggest difference to websites has yet to be fully exploited.

Video on the web has always been a little complicated, but as HTML5-capable browsers are increasing and becoming a majority, it’s finally possible to fully leverage the possibilities offered by the standard to present an immersive, video-backed user interface. In this tutorial, we’re going to show you how to do exactly that using the handy BigVideo.js library that’s available as a plug-in for jQuery. We’ll show you how to control your video backgrounds, and create playlists that ensure you have continuous motion on your website.

DOWNLOAD TUTORIAL FILES

Create your HTML

We’re using a basic HTML5 document with a single article, complete with header and footer for this tutorial. The HTML markup is as basic as you can get; we’ve got a body element, a header section, and a heading. You can either open the start.html document from the resource disc, or use your own content.

Download some video

You’ll need some high-quality video to work with while working on this tutorial, so before we go any further either locate a clip of your own, use Wikimedia Commons to find a clip, or visit the excellent www.beachfrontbroll.com website and grab a free video – we’ve gone for the fireworks in slow motion.

Add video sources

We’re now ready to add the markup that will provide the background video clips we want to appear on our page. We’ll start off with one, but treat it as a slide so that later we can add additional slides and provide in-page user controls to switch between backgrounds.

001 <div class=”wrapper”>
002    <div class=”screen” id=”screen-1” data-    video=”video/video1.mp4”>
003        <img src=”images/video1.jpg”         class=”big-image” />
004        <h1 class=”video-title”>Title of     video</h1>
005    </div>
006 </div>

Add a stylesheet

We’ll need to set up the video, but first the page needs some CSS to help with positioning the basic page elements and allowing the video to fill the background. Start by creating a new stylesheet document and including it in your HTML, then add the rule shown for the HTML and body elements. This will hide anything outside the visible portion of the screen.

001 html, body {
002     margin: 0;
003    padding: 0;
004    color: #fff;
005    overflow: hidden;
006    font-family: ‘Open Sans Condensed’,     Arial,     sans-serif;
007    font-weight: 300;
008    font-size: 1em;
009 }

The wrapper

We’ve currently got one video in our markup, so our wrapper (which provides the backdrop to our page) needs to only be 100% wide and 100% tall. If we had two videos, we’d want the wrapper to be 200% wide to allow the videos to stack horizontally off screen.

001.wrapper {
002    position: absolute;
003    width: 100%;
004    height: 100%;
005    z-index: 0;
006 }
007 .screen {
008    position: relative;
009    height: 100%; 
010    width: 100%; /* total number of     videos/100%      */
011    float: left;
012    overflow: hidden;
013 }

Using a poster

Video takes time to load, so we’ve created a ‘poster image’ for our video, and included it within the markup. In our case it’s a simple still from the first frame of the video. We now need to style this image to fill the screen in the exact same way that the video will. Add the styles shown to put this in place, and remember to output a still of the first frame from your video!

001 .big-image {
002    min-width: 100%;
003    min-height: 100%; 
004    height: auto;
005    width: auto; 
006 }

Final styles

We also need to style the rest of our page content, as well as the video title. Make sure that you’ve given your principal content area a high z-index value to ensure it sits in front of the video background, and style as you normally would. We’ve gone for a simple layout, which you can see by opening ‘step07.html’ from the resource disc. Add the rules shown for the video title.

001 .video-title {
002    position: absolute;
003    bottom: 5%;
004    right: 5%;
005    opacity: .5;
006    margin: 0;
007    padding: 0;
008    line-height: .65;
009    font-size: 3em;
010    text-transform: uppercase;
011 }

Download the library

We’ve now got everything set up ready for the BigVideo.js library, so let’s download it now. Visit the BigVideo.js website at dfcb.github.io/BigVideo.js and download a copy of the library. Note that you’ll also need the dependencies video.js, jQuery, jQuery UI and the jQuery imagesloaded plug-in. Grab all of these and include them in the head section of your page.

Call the library

As with all jQuery plug-ins, we need to call the BigVideo method to initialise the library. Add the code shown to set up your first fullscreen video background. Note that we’ve also got a callback method that animates the video poster to fully transparent once the video has loaded fully – without this, the video would play, but be obscured by the image.

001                    BV = new $.BigVideo({forceAutoplay    :isTouch});
002                    BV.init();
003                    showVideo();
004                    BV.getPlayer().            addEvent(‘loadeddata’, function(){
005                        onVideoLoaded();
006                    });
007                function showVideo() {
008                    BV.show($(‘.wrapper .screen:nth-    child(1)’).attr(‘data-video’),{ambient:true});
009                    $(‘.wrapper .screen .big-image’).    css({opacity:1});
010                }    
011                function onVideoLoaded() {
012                    $(‘.wrapper .screen:nth-    
013 child(1)’).find(‘.big-image’).        animate({opacity:0},500);
014                 }
015

Events and control

BigVideo uses video.js to render and organise video content, so we can hook into this and use all the standard methods you’ll be familiar with (assuming you’ve tried video.js previously). Check the documentation for video.js at www.videojs.com if you’d like to look into these methods to create play/pause buttons, or special effects.

Test and review

Before we move any further, it’s well worth loading and testing your page in the browser to see what’s going on. Make sure that your video is loading and playing in at least one browser. To support all browsers, you’ll need to encode your video into different formats and provide them as alternate sources.

Add additional videos

Now that we’ve got a functioning background video, we can have some fun. We’ll start by adding a second video to our page. We set up our markup ready to accommodate this, so it’s simply a case of adding the additional markup shown inside the wrapper <div>.

Update your styles

As well as the HTML markup, we’ll also need to update our stylesheet to reflect the additional video. There are a few places where we set specific widths according to the number of videos included, so update your styles as shown to reflect the second video being introduced.

Add user controls

We need to provide a simple way for users to switch between the two videos we’ve included on our page. A set of arrow buttons will do exactly that. We’ll create the buttons first, then hook them up so that they create a pleasant sliding effect, transitioning between
the different video slides.

001 <nav id=”prev-btn”>
002     <a href=”#” class=”icon-chevron-sign-    left”></a>
003 </nav>
004 <nav id=”next-btn”>
005     <a href=”#” class=”icon-chevron-sign-    right”></a>
006 </nav>    

Add style

We’ll add some CSS to generate the right look for our buttons, and position them on the page accordingly. Note that we’re using the excellent and free Font Awesome to render our buttons, so we only need to include the CDN stylesheet in our page to get the right appearance before adding styles to position the buttons.

001        <link href=”http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css”     rel=”stylesheet”>
002 /* Nav */
003 nav {
004    position: absolute;
005    right: 5%;
006    top: 45%;
007    padding: 20px;
008    background: #000;
009    border-radius: 40px;
010    opacity: .4;
011    cursor: pointer;
012    z-index: 1000;
013 }
014 nav:hover {
015     opacity: .6;    
016 }
017 nav a {
018     font-size: 4em;
019 }
020 nav#prev-btn {
021     right: auto;
022    left: 5%;
023 }

Make them work

Now we’ve got a pair of buttons, it’s time to hook them up. We need a pair of functions that deal with the buttons being activated, sliding the new video into place. Add the code shown below, and note that we’ve written these to accommodate more videos later if desired – the functions make no assumptions about how many videos you have, other than that there must be more than one.

001                 // Next button click goes to next     div
002                $(‘#next-btn a’).on(‘click’,     function(e) {
003                    e.preventDefault();
004                    $(“.wrapper”).animate({left:0-    $window.width()},1000,function(){
005                        $(“.wrapper .screen:last-    child”).after($(“.wrapper .screen:first-    child”));
006                        $(this).css({left:0});
007                        showVideo();
008                    })
009                });
010                $(‘#prev-btn a’).on(‘click’,     function(e) {
011                    e.preventDefault();
$(“.wrapper .screen:first-child”).    012 before($(“.wrapper .screen:last-child”));
013                    $(“.wrapper”).css({left:0-$window.    width()}).animate({left:0},1000,function(){
014                        showVideo();
015                    });
016                });
017

Test again

Load up your page in your browser once again, and test to ensure that both the forward and backward buttons have the anticipated effect. You’ll notice that when the video first loads there’s a strange jumping effect caused by the image being misaligned – we’ll fix that next!

Centre the images

When you load your video in situ, it’s centred on the screen, but your image isn’t. We’ll need to write a little bit of JavaScript to fix this and banish the jumping effect as the image fades out. Add the function shown below to sort this problem out, remembering to call it within your $(document).ready() function.

Mobile problems

If you test on your smartphone you’ll notice that the experience is a little less impressive. Mobile devices tend to have limited bandwidth, and also won’t necessarily auto-play video content. We can deal with this by offering alternative content thanks to Modernizr. Add in the code for this step (available on the resource disc) to test if we’re on a mobile, touch-capable device.

Provide an alternative

Now we’ve put that code in place, touch-capable devices won’t render the video, instead falling back to the static poster image. If you wanted to take this a step further, you could create stylesheet rules specific to touch devices by using Modernizr’s class system, as shown in the example code here. This works because Modernizr adds a ‘touch’ class to the HTML element where the device supports touch, shown below.

001 .touch #wrapper { display:none; }

Test on touch

Having created a workaround for touch-enabled devices, you’ll want to test thoroughly on smartphones and tablets. If you’d like to tweak the styles just for non-touch devices, use the class ‘.no-touch’, or for touch devices use ‘.touch’, keeping in mind that Modernizr applies this class to the HTML element.

Add more and deploy

You’ve now got a fully flexible video background, along with a useful function that prevents low-bandwidth mobile devices from being forced to download the video content. Test, add more videos to suit, and consider how you could customise the transition effects to make something unique to your own site.

×