Fullscreen Background Video Plugin For jQuery - BigVideo

File Size: 8.84 KB
Views Total: 24846
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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:

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

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.