✭ How to add video background to your website? ✭

0/50 ratings

Good day dear visitor. Quite a lot of time has passed since my last publication, for which I very much apologize and promise to correct, because of the tight schedule on website development, as well as personal family circumstances take up the bulk of my precious time.

oday I again want to offer you an interesting video background script for a site that can be easily installed on any site, has a simple structure, and it is also possible to change the background video in the form of slides with a certain period of time, demonstration of the video background as always at the bottom of the page.

Every day on the Internet there are a huge number of new sites, and each of its owners wants to stand out in the eyes of the visitor, and of course bypass their competitor, to make their site more attractive and user-friendly. So, embed a video background on the site is one of the features that will make your site more attractive.

In this article, we will just consider a non-standard approach to creating a modern and stylish site; in fact, such a question as how to create a background for the site you will no longer have. This video background plugin allows you to easily add background video for any website, it can play quiet background video or a series of videos, with their smooth replacement.

The video background script for the site that we want to provide you with has a big feature in that the video background automatically adjusts to all screen sizes of the devices. The full-screen video background for the site is made in HTML5 using jQuery, jQuery UI and jQuery imagesloaded libraries. Well, thanks for this wonderful script is Chicago-based web developer John Polacek.

Well, I described the brief information, and now let's look at how to create a video background for a site with examples, well, let's go.

For the video background to work, you must have jQuery connected, make sure that you have it connected when using this script. To simply play a video that occupies the entire browser window, do the following:

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('vids/oceans.mp4');
});

$(function() {

var BV = new $.BigVideo();

BV.init();

BV.show('vids/oceans.mp4');

});

For video transitions, you need to enable the original order with various video formats. Refer to this example.

$(function() {
    var BV = new $.BigVideo({useFlashForFirefox:false});
	BV.init();
    BV.show([
        { type: "video/mp4",  src: "vids/river.mp4" },
        { type: "video/webm", src: "vids/river.webm" },
        { type: "video/ogg",  src: "vids/river.ogv" }
    ]);
});

$(function() {

var BV = new $.BigVideo({useFlashForFirefox:false});

BV.init();

BV.show([

{ type: "video/mp4", src: "vids/river.mp4" },

{ type: "video/webm", src: "vids/river.webm" },

{ type: "video/ogg", src: "vids/river.ogv" }

]);

});

To play silent video in the background of the page, use the environment setting:

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('vids/oceans.mp4',{ambient:true});
});

$(function() {

var BV = new $.BigVideo();

BV.init();

BV.show('vids/oceans.mp4',{ambient:true});

});

Or you can play a series of background videos:

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

$(function() {

var BV = new $.BigVideo();

BV.init();

BV.show(['vids/vid1.mp4','vids/vid2.mp4','vids/vid3.mp4'],{ambient:true});

});

Please note that mobile devices do not support autoplay video. To take this into account, use Modernizr to detect touch-screen devices, then send a large image to use the videophone script.

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