How To Build a Fullscreen Background Video Player

After looking over countless jQuery plugins I have seen a lot of new HTML5 video techniques. The audio and video elements have created a new method of publishing digital media, streaming off a web design Singapore server. But developers have been hard at work customizing these features to be used within advanced layouts.

In this tutorial I want to look at using big video backgrounds within typical web design Singaporesite layouts. I’ve chosen the jQuery plugin BigVideo.js which includes a list of resources in the documentation. We can setup genuine HTML5 videos streaming as backgrounds behind the main page content. It is not an easy setup, but I’ll provide a clear step-by-step process to follow along.

Single Demo – Playlist Demo – Download Source Code

Staging the Document

I am starting off by creating the typical HTML5 doctype and header format. There are a lot of dependencies we need to include within the header for this effect to work. Most of the scripts are included within BigVideo’s download page but I’ve added a small list below:

jQuery

jQuery UI

Video.js

imagesLoaded

Now this list does not include the two CSS and JS files needed for BigVideo to work. Altogether that is 6 files we need, split into 5 JS scripts and one CSS stylesheet. It is a lot, but you don’t often find high-quality background video plugins with this much flexibility. Also many of these libraries can be hosted on various CDNs. Check out my sample header code to get an idea:

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>BigVideo Background Demo Page</title>
  <meta name="viewport" content="width=device-width">
  <link rel="shortcut icon" href="http://vandelaydesign.com/favicon.ico">
  <link rel="icon" href="http://vandelaydesign.com/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/bigvideo.css">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nunito:400,700">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
  <script type="text/javascript" src="js/jquery.imagesloaded.min.js"></script>
  <script type="text/javascript" src="http://vjs.zencdn.net/c/video.js"></script>
   <script type="text/javascript" src="js/bigvideo.js"></script>
</head>

The actual body text requires a type of absolute or relative positioning based on a container. This happens because our BG video will load after the DOM finishes, and so it’ll cover up all the HTML content. That is, unless it is positioned relative to the rest of the page. I’ll explain a bit of my CSS in the next section.

Content Positioning

I haven’t done much editing inside bigvideo.css since it’s not needed so much. Some of those styles you may wish to update based on differences within your own layout. But it is also possible to just rearrange elements in your current design based on new CSS properties.

#wrap {
  position: relative;
  color: #fff;
  margin: 50px 20px 420px 100px;
  padding: 25px 35px;
  width: 550px;
  background: rgba(0,0,0,0.55);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}

p { font-size: 1.35em; line-height: 1.25em; font-weight: normal; margin-bottom: 12px; }

a { color: #95c3d6; }

a:hover { color: #bedeec; }

h2 { font-size: 2.55em; font-weight: bold; line-height: 1.75em; color: #fff; text-shadow: 1px 1px 0px #333; font-family: 'Nunito', 'Trebuchet MS', sans-serif; }

The most important codes I’ve added pertain to the #wrap div and its position on the page. Although I have setup specific values for margins & width, you can use min-max width or different units of measurement to get the exact fit needed. I am using the position:relative property because it forces the wrapper content’s placement to appear on top of the video.

Also you’ll notice that I have included a third-party Google web design Singaporefont attached into the header text. This is a nice way of sprucing up your pages so they do not look as bland. The key is picking a small font which won’t hog bandwidth and elongate download speeds.

Adding the Video JavaScript

To wrap it all together I’d like to go over some of the different settings within BigVideo’s API. Much of the video.js API can still be attached onto the video player. This means you can manually play, pause, reset volume, and various other tasks.

<script type="text/javascript">
  var BV;
  $(function() {
    // initialize BigVideo
    BV = new $.BigVideo();
    BV.init();
    BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});
	});
</script>

You can find this block of code inside my index.html page down at the bottom closing tag. Each of these lines is required to initiate a basic video background effect without too many fancy options. Inside the show() method we are passing in 2 different parameters. The first is a self-hosted CDN mp4 file directly from the Video.js web design Singaporesite. The second value is setting our video to “ambient” which means the sound will not play.

Based on your needs for each web design Singaporesite this may be an important option to setup. Not everybody enjoys having sounds playing automatically – or even at all! This option is completely up to each developer and may be omitted if you’d like to use the default state. Additionally I want to share the demo codes for setting up more than one video source type, as seen below.

$(function() {
  // initialize BigVideo
  var BV = new $.BigVideo({useFlashForFirefox:false});
  BV.init();
  BV.show('media/videos/oceans-clip.mp4', {altSource:'media/videos/oceans-clip.ogv'});
});

Creating Video Playlists

The last technique I want to cover is how to build customized playlists for multiple videos. I have rarely seen web design Singaporesites which are currently utilizing this technique but it does offer a lot of unique substances for media fanatics. The quickest way to setup a video slideshow is to offer multiple source options for the first variable parameter.

$(function() {
  // initialize BigVideo
  BV = new $.BigVideo();
  BV.init();
  BV.show(['media/videos/bg01.mp4','media/videos/bg02.mp4','media/videos/bg03.mp4'],{ambient:true});
}

You can see how easy it is chaining settings together within the same method call. BigVideo definitely provides a stable solution for HTML streaming backgrounds. Even older browsers can support the players based on FLV/Flash fallbacks. Now one other feature of the playlist is to allow users the option of switching between videos. This requires the Modernizr JavaScript library which I have included with my demo examples.

We can duplicate this effect by setting up anchor links with href values targeting the different videos. Then apply a jQuery click event handler to update the BV.show() method. You can see my sample code below.

$('.playlist-links').on('click', function(e) {
  e.preventDefault();
  BV.show($(this).attr('href'));
});

You should be able to rename the target class into anything you’d like. Also the added videos will display a small play feature at the bottom of the screen. This isn’t added by default, but you may configure the options in the BigVideo() setup method. There is a lot of initial work required to get the scrip running, but it is worth the outcome for such an incredible effect on your latest web design Singapore project.

We have covered a lot of the more common features when using BigVideo.js background videos. However you can check out more examples by visiting the Github issues area which includes frequently asked questions. As more people start using the plugin there will be more solutions for problems which pop up time-and-time again.

How To Build a Fullscreen Background Video Player

Single Demo – Playlist Demo – Download Source Code

Final Thoughts

I hope some developers may put this code to good use. Websites using big images and videos in backgrounds tend to draw in more attention from visitors. These are key selling points for branding and marketing, which is crucial for any successful business. Although this design style will not fit every web design Singaporesite I’m sure this plugin will be fun to play around with.

Aside from the resources on the BigVideo Github page you may also download a copy of my tutorial demo source code. This zip archive includes just the basic files you’ll need to get this up and running properly. But along with new ideas we’d also like to hear any questions or suggestions from readers. And be sure to let us know if you launch any web design Singaporesites utilizing this video background effect!

About the Author:

Jake is a freelance writer and frontend web design Singapore developer. He can be found writing in many blogs on topics such as mobile interfaces, freelancing, jQuery, and Objective-C. Check out his other articles throughout Google and follow his tweets @jakerocheleau. Jake’s Google+ profile.