Online Demo local download
Do you get tired of websites with the same picture as the background? No matter how you beautify the website or add cool special effects, images are still images. It will never make your page truly active.
The jQuery plug-in bigvideo. js we introduced today will definitely allow you to easily add a superb full-screen video background, so that your users may feel differently. I believe you will love it!
Main features
Dependent on vidoe. js, jQuery, jQuery UI
Realistic display of the video list
Ability to generate Adaptive Video backgrounds
If automatic playback is not supported, images can be displayed.
How to Use
Import the required class Library:
<! -- BigVideo Dependencies -->
<Script src = "// ajax.googleapis.com/ajax/libs/jquery/1.7.2/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>
To display the video background:
$ (Function (){
Var BV = new $. BigVideo ();
BV. init ();
BV. show ('HTTP: // video-js.zencoder.com/oceans-clip.mp4 ');
});
To quietly display multiple video backgrounds:
$ (Function (){
Var BV = new $. BigVideo ();
BV. init ();
Bv.show('vid1.mp4', 'vid2.mp4', 'vid3.mp4 '], {ambient: true });
});
If automatic playback is not supported, use the following fallback, which requires the support of modernizr:
Var BV = new $. BigVideo ();
BV. init ();
If (Modernizr. touch ){
BV.show('video-poster.jpg ');
} Else {
BV.show('video.mp4 ', {ambient: true });
}
Is it great? I hope you will have the opportunity to apply this plug-in on your website!