How to set up a video background in Drupal 7 using the jquery.videobackground plugin

jQuery Video Background Plugin

I’ve recently been working on a jQuery plugin that uses an HTML 5 video as the background for a page. An idea that perhaps owes far too much of its inception to splash pages, it was worth investigating; as a test for HTML5 video player development and because of its interesting use of the video element.

This blog explains how to set up a video background in drupal. There are many plugins available to create background video in drupal and I am going to discuss the jQuery video background 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.js

Next, you have added the following jQuery code in your custom js file

$(document).ready(function() {
    $('body').prepend('

');
    $('.video-background').videobackground({
         videoSource: [['sites/all/themes/midnight/video/shutter3.webm', 'video/webm'],
         ['sites/all/themes/midnight/video/shutterstock.mp4', 'video/mp4']],
         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:

$(‘.video-background’).videobackground({
   videoSource: ['video/big-buck-bunny.webm','video/big-buck-bunny.ogv','video/big-buck-bunny.m4v'],
   controlPosition: '#main',
   poster: ‘video/big-buck-bunny.jpg’,
   loadedCallback: function(){
   $('div').click(function(event) {
     event.preventDefault();
   if ($('.video-background video').get(0).paused) {
      $('.video-background video').get(0).play();
   }
   else if ($('.video-background video').get(0).ended) {
      $('.video-background video').get(0).play();
   }
   else {
      $('.video-background video').get(0).pause();
   }
  }
 });
});

The code wrapped in loadedCallback is added to the plugin and causes any div’s on the page to trigger the video to play or pause when clicked.

Plugin parameters:

VideoSource: Either an array of strings of video URL's or a two-dimensional array containing video URL's and types. No default.
Poster: The URL string of the image used for the video poster attribute. No default.
Autoplay: Video autoplay attribute boolean. Default is true.
Preload: Video preload attribute string. Default is none.
Loop: Video loop attribute boolean. Default is false.
ControlPosition: Position of the video controls, will append the controls to choose DOM element. Default is null. If null will append controls to the element the video background has been applied to.
ControlText: An array of text options for the video control elements.
Resize Boolean which will trigger the video background to resize to match the browser height. Set to false is video background is used on another element. Default is true.
PreloadHtml: If required, a user-controlled HTML string can be injected into the control area of the page while the video is preloading. It will be overwritten by the video controls when the video is ready to play.
PreloadCallback: This allows a function to be triggered when the video preload is initiated.
LoadedCallback: This allows a function to be triggered when the video is loaded.
ResizeTo: Allows the video background to resize to either the document or the window. Default is documented.
Muted: Starts video muted. Default is false.