jQuery Plugin For Fullscreen Background Video And Images | BigVideo.js

full-screen-responsive-video-background

BigVideo.js jQuery Plugin for large background video (and images) to your website. It uses jQuery UI to control the scrollbar, and the images loaded to run a callback after all selected/sub-images have been loaded.

full screen responsive video background, background video html template, html background video with audio, how to add text on background video in html

How to make use of it:

1. Include the necessary JavaScript files on your page.

<script src="//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="//vjs.zencdn.net/c/video.js"></script> 
<script src="js/bigvideo.js"></script> 

2. Include the 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

Fullscreen Background Video, BigVideo.js Plugin/Github


See Demo And Download

Official Website(johnpolacek): Click Here

This superior jQuery/javascript plugin is developed by johnpolacek. For extra advanced usage, please go to the official website.