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 examples bower install BigVideo.js

Setup

BigVideo.js uses the Video.js api. It also requires jQuery, jQuery UI (for the slider control) and the jQuery imagesloaded plugin. If you installed using Bower, they'll have been installed automatically. 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://vjs.zencdn.net/v/oceans.mp4');
});

For crossbrowser fallbacks, you can include a source order with different video formats. Refer to this example. (Note: Safari does not fallback correctly for webm, so include mp4 first)

$(function() {
    var BV = new $.BigVideo({useFlashForFirefox:false});
	BV.init();
    BV.show([
        { type: "video/mp4",  src: "vids/river.mp4" },
        { type: "video/webm", src: "vids/river.webm" },
        { type: "video/ogg",  src: "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://vjs.zencdn.net/v/oceans.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 and this example for multiple video formats.

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. Refer to the Vimeo Compression Guidelines for best practices in preparing video files.

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.