Skip to main content
Background vidoes

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.js

Next 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: [['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 on 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 type. 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 prelod 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: Allows a function to be triggered when the video preload is initiated.
    loadedCallback: 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 falsey.

Comments

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.