How to set up a video background in Drupal 7 using the jquery.videobackground plugin
I’ve recently been working on a jQuery plugin that uses a HTML5 video as the background for a page. An idea that perhaps owes far too much of it’s inception to splash pages, it was worth investigating; as a test for HTML5 video player development and because of it’s interesting use of the video element.This blog explains about how to set up video background in drupal. There are many plugins available to create background video in drupal and I am going to discuss jQuery videobackground plugin. The plugin should work in any browser that supports HTML5 video.First you have to download jquery-videobackground plugin from here and place it at theme's js folder, for ex: sites/themes/theme-name/js/jquery.videobackground.jsNext you have added the following jQuery code in your custom js file
$(document).ready(function() {
$('body').prepend('<div class="video-background"></div>');
$('.video-background').videobackground({
videoSource: ,
controlPosition: '#main',
poster: 'sites/all/themes/midnight/video/shutter.png',
loadedCallback: function() {
$(this).videobackground('mute');
}
});
});
Here are two callbacks in the plugin, one when the video is preloading and one when the video has loaded. Callbacks allow you to write additional JavaScript that will be triggered by the plugin.A callback should allow you to use the other buttons. It’ll look something like this: