BigVideo.js

The jQuery Plugin for Big Background Video (and Images)

This plugin makes it easy to add fit-to-fill background video to websites. It can play silent ambient background video (or series of videos). Or use it as a player to show video playlist. BigVideo.js can also show big background images, which is nice to have for showing big background images for devices that don’t have autoplay for ambient video.

BigVideo.js is built on top of Video.js from zencoder. So big thanks to them!

You can read about how to use BigVideo.js below. Also, check out the tutorial I wrote for Codrops.

DOWNLOAD: zip tar

Setup

BigVideo.js uses the Video.js api. It also requires jQuery, jQuery UI (for the slider control) and the jQuery imagesloaded plugin. Make sure you include all these libraries when using BigVideo.js.

To simply play a video that takes up the entire browser window (like in this example), do this:

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
});

For best results in Firefox, create an Ogg version of your video and configure BigVideo.js as below or in this example. (note: works for WebM also)

$(function() {
    var BV = new $.BigVideo({useFlashForFirefox:false});
    BV.init();
    BV.show('vids/river.mp4', {altSource:'vids/river.ogv'});
});

Ambient Video

To play silent video in the background of a page (like in this example), use BigVideo’s ambient setting:

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});
});

Or play a series of ambient background videos (like in this example)

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show(['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true});
});

Keep in mind that mobile devices do not allow video autoplay. To account for this, use Modernizr to detect for touchscreen devices, then send a large poster image for BigVideo to use instead (like in this example).

var BV = new $.BigVideo();
BV.init();
if (Modernizr.touch) {
    BV.show('video-poster.jpg');
} else {
    BV.show('video.mp4',{ambient:true});
}

Playlists

You can create a playlist like this:

For more on how to do this, including auto-hiding content and alternate fullscreen image content for touchscreen devices, take a look at this example.

Playlist clips courtesy of Beachfront B-Roll

Video.js

Because BigVideo.js is built on top of Video.js, you can use the Video.js api. Access the Video.js player with the getPlayer() method.

BV.getPlayer().pause();

Tips

For best results, I recommend using Vimeo. Sign up for Vimeo Pro, then use their direct mp4 link to serve the video. Vimeo not only has solid bandwidth for delivering video, they do great compression. If you start with a high def source at a bitrate of 10mbps or more, it does such a nice job that you can probably get away with using the standard def source as your background video.

To find some great background video footage, try the links posted here, which is where I found out about all the excellent clips over at Beachfront B-Roll.