By
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.
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.
