Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

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

Parent Feed: 

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: ,
         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 in to the control area of the page while the video is preloading. It will be over written 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 document.
    muted: Starts video muted. Default is falsey.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web