Fullscreen Background Video Plugin For jQuery - BigVideo

BigVideo is an awesome jQuery plugin for adding fit-to-fill background video or images to your website. It uses jQuery UI for the slider control, and the jQuery imagesloaded plugin to trigger a callback after all the selected/child images have been loaded.

You might also like:

• Dynamic Slideshow Background Plugin - backstretch
• Responsive Image Background Plugin - anystretch
• jQuery Fullscreen Background Slideshow - MaxImage
• Fullscreen Background Slideshow with Audio
• Animated Fullscreen Background Image Slideshow
• Spritely - Pure HTML & jQuery Background Animation Plugin

Features:

• Play silent ambient background video (or series of videos)
• Show video playlist
• Show big background images

Basic Usage:

1. Include necessary javascript files on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/jquery-ui-1.8.22.custom.min.js"></script> 
<script src="js/jquery.imagesloaded.min.js"></script> 
<script src="http://vjs.zencdn.net/c/video.js"></script> 
<script src="js/bigvideo.js"></script> 

2. Include BigVideo CSS file

<link rel="stylesheet" href="css/bigvideo.css">

3. Initialize the plugin

$(function() {
    var BV = new $.BigVideo();
	BV.init();
	BV.show('VIDEO/IMAGE Url');
});

4. Options and defaults.

// If you want to use a single mp4 source, set as true
useFlashForFirefox:true,
// If you are doing a playlist, the video won't play the first time
// on a touchscreen unless the play event is attached to a user click
forceAutoplay:false,
controls:false,
doLoop:false,
container:$('body'),
shrinkable:false

More Examples:

• Ambient Loop
• Ambient Touch
• ogg example
• PlayList
• Simple
• Simple Loop
• webem

Change Logs:

2015-03-05

• Fixed: .vjs-big-play-button selector is bad solution

2015-01-09

• assign bigvideo object to empty object instead of jquery global

2014-08-25

• fix #142 use outerwidth/height for containers with padding

2014-08-04

• fix video frame larger than viewport when container is larger than the window

2014-07-31

• set autoplay click target to container

2014-03-28

• bug fixes.

2014-03-27

• update to v1.0.8

2014-03-05

• fix height resizing bug.

2014-02-17

• fix chrome height bug.

 

---

This awesome jQuery plugin is developed by johnpolacek. For more Advanced Usages, please check the demo page or visit the official website.