BigVideo.js – big background video and images

BIGVIDEO.JS :

  • the plugin helps you to add full background videos to your website;
  • you can use it with a single video on repeat or to show a video playlist;
  • the videos can play silent;
  • the plugin uses the video.js api (so you will need to include the video.js file in your page);
  • it also requires jQuery, jQuery UI and jQuery imagesloaded.

Setup

Play a series of ambient background videos (without sound)

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

Remember that mobile devices do not allow video autoplay. You can use Modernizr to detect for touchscreen devices, then show a large poster image fot BigVideo to use instead

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

Demos

Ambient video demo

Series of ambient background videos demo

Mobile demo

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s