jQuery HTML5 video background 1.0.0

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.

There is a demo page available. I’ve used the existing site theme for the demo page which should adequately show the plugin is capable of being applied anywhere but lacks the impact a dedicated page design would provide.

The plugin should work in any browser that supports HTML5 video and although I’ve provided some styling in the demo page and in the source on GitHub, your actual page is likely to be bespoke so the CSS is only provided as an example.

The source and issue tracking is available on GitHub.

Update – 30th August 2011

A new version of the plugin has been created including fixes and ideas from the comments here and issues on GitHub. Find out more at the blog post jQuery HTML5 video background 1.1.1

39 Responses to jQuery HTML5 video background 1.0.0

  1. Stephane says:

    hi, I found your plugin and I have to say that ‘is amazing..!
    Just realize you posted it few days ago.
    I tried with another plugin before but it is very hungry on ressources.

    Have one or two questions:

    I tried the site on blackberry and everything is fine, I can see the page with no video and no background image from the plugin, I just see the css I choose for the body.

    But on itouch/iphone, the video remains under the text and links, so I can’t click on the links on my page..
    Do you know if there is a way to disable the video for mobile safari..?..
    maybe with : isMobileSafari

    but I don’t know java enough..

    And I would like to be able to put the play and pause states on a button I have (soundcloud custom jquery mp3 player), that I use to play and pause the music.

    Is there a simple way to add the function to other’s elements…?

    have a look here if you want:
    http://tinyurl.com/5syqlkp

    Thanks anyway..!
    Regards.
    S.

  2. Stephane says:

    Hi, again..
    Finally I used a javascript to redirect the mobile users to a simple html page.

    if you have a clue for the button issue..!

    Thanks
    S.

  3. George Paterson says:

    Hi Stephane, there 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. Tabbing isn’t working in comments so I’ve highlighted the start and end using strong tags.

    The test site looks great.

    • stephane says:

      Hi thanks for your answer..
      glad you like the page.!
      I will check your code and try to make my button works.

      Here is the final page.
      http://tinyurl.com/42rstoc
      I put a detect mobiles browsers in htaccess and bulit a more compatible page for them.

      I noticed that on safari the video take a little time to start..My connection is a little slow but the video start quickly on firefox and chrome and the mp4 is only 4 Mo.
      it’s look like it wait to the entire movie to be loaded before starting.?

      Thanks again for this great plugin !

  4. Tim says:

    Patterson this code as HTML5, video will be able to be seen as the background in Ipads as well as all browsers correct except for mobile correct? I have been looking for non flash solutions. How well does this hold up?

    Please Advise

  5. Tim says:

    Hey Patterson can I call up a flash video as background for older browsers if it does not recognize HTML 5 video as background?

    Please Advise

  6. George Paterson says:

    The demo page is using WordPress, i wanted to make the demo a real world example.

    Add a div to the page using JavaScript that the video plugin will then attach to:

    jQuery(‘body’).prepend(‘<div class=”video-background”></div>’);
    jQuery(‘.video-background’).videobackground({…

    The video-background div then has a set of styles attached to it:

    .video-background {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
    }

    That should get you kick started.

  7. anonymous says:

    Hi, great plugin, implementation easy as can be but I’ve found that Firefox 5/6 Mac only loads the poster, not the video, I saw this was raised on github but don’t have membership, I can give you a link but it’s a private website so I’d rather email it to you if possible!

  8. Adnan says:

    Hello,

    First of all it’s a great plugin. It’s using very little CPU.

    Anyway, I have few concerns:
    1. I can’t get this plugin work in IE9. I know there’s a problem with older IE browser versions. Can it run in IE?
    2. How can I disable audio by default without showing and clicking audio button to turn sound off?
    3. I’ve enabled loop within jquery.videobackground.js file (loop: true) but video stops at the end.

    Many thanks in advance for your help.

    Best regards,
    Adnan

  9. George Paterson says:

    anonymous – GitHub is a free service i recommend you give it a try. I’ll email you using the email address used in your comment.

    Adnan – I recently checked in to GitHub a fix for IE9. You should be able to run a video in IE9. Download the update from GitHub.

    I should have surfaced the mute as a public function. You can probably still do this with a loaded callback. I’ll post an example on here later.

    The loop should work, do you have an example?

  10. George Paterson says:

    Adnan your problem is similar to Stephane’s. You can use a loaded callback to set the audio:

    $(‘.video-background’).videobackground({
    videoSource: ['video/big-buck-bunny.webm',
    'video/big-buck-bunny.ogv',
    'video/big-buck-bunny.m4v'],
    loadedCallback: function() {
    $(‘video’, element).attr(‘muted’, true);
    $(‘video’, element).get(0).volume = 0;
    $(‘.ui-video-background-mute a’, controls).toggleClass(‘ui-icon-volume-on ui-icon-volume-off’);
    $(‘.ui-video-background-mute a’, controls).text(element.videobackground.settings.controlText[3]);
    }
    });

    This will set the audio to mute and set the icon and text to the mute state. It should fire as soon as the video is loaded and ready to play.

    • Adnan says:

      Hi George,

      Many thanks for your help. I’ve managed to solve the IE9 and loop issues, but still can’t turn the sound off by default. When I add lines you gave me to the code then video disappears completely. I’m not sure I’m doing it right. Here is the script from the header of my page:

      $(document).ready(function() {
      $(‘body’).prepend(”);
      $(‘.video-background’).videobackground({
      videoSource: ['/video/video.mp4',
      '/video/video.webm',
      '/video/video.ogv'],
      controlPosition: ‘#main’,
      poster: ‘/video/video.jpg’
      });
      });

      Best regards,
      Adnan

  11. Adnan says:

    Hi George,

    Many thanks for your help. I’ve managed to solve the IE9 and loop issues, but still can’t turn the sound off by default. When I add lines you gave me to the code then video disappears completely. I’m not sure I’m doing it right. Here is the script from the header of my page:

    $(document).ready(function() {
    $(‘body’).prepend(”);
    $(‘.video-background’).videobackground({
    videoSource: ['/video/video.mp4',
    '/video/video.webm',
    '/video/video.ogv'],
    controlPosition: ‘#main’,
    poster: ‘/video/video.jpg’
    });
    });

    Best regards,
    Adnan

  12. George Paterson says:

    Adnan try deleting controlPosition: ‘#main’ to start with as the page doesn’t have a div with id of main as far as i know. The controlPosition has a default of being in the video-background div. I’ll have a fresh look at the weekend.

    • Adnan says:

      Hi George,

      When I add your code to mute sounds then the video disappears completely. Bellow is the full code from my website so please take a look.

      Best regards,
      Adnan

      START SCRIPT
      $(document).ready(function() {
      $(‘body’).prepend(”);
      $(‘.video-background’).videobackground({
      videoSource: ['/video/SS11.mp4',
      '/video/SS11.webm',
      '/video/SS11.ogv'],
      poster: ‘/video/SS11.jpg’,
      loadedCallback: function() {
      $(‘video’, element).attr(‘muted’, true);
      $(‘video’, element).get(0).volume = 0;
      $(‘.ui-video-background-mute a’, controls).toggleClass(‘ui-icon-volume-on ui-icon-volume-off’);
      $(‘.ui-video-background-mute a’, controls).text(element.videobackground.settings.controlText[3]);
      }
      });
      });
      END SCRIPT

  13. George Paterson says:

    Adnan, if you get a fresh update from Github, i’ve updated the script to use public methods. One method is .videobackground(‘mute’).

    I’ll update the example page to demonstrate it working. Below is what the update will look like. This should fix the mute issue you have.

    $(document).ready(function() {
    $(‘body’).prepend(‘<div class=”video-background”>‘);
    $(‘.video-background’).videobackground({
    videoSource: ['video/big-buck-bunny.mp4',
    'video/big-buck-bunny.webm',
    'video/big-buck-bunny.ogv'],
    controlPosition: ‘#main’,
    poster: ‘video/big-buck-bunny.jpg’,
    loadedCallback: function() {
    $(this).videobackground(‘mute’);
    }
    });
    });

  14. giorgio says:

    Hi George,

    in which php. page of my wordpress site should i add this:
    jQuery(‘body’).prepend(‘’);
    jQuery(‘.video-background’).videobackground({…
    ??

  15. Roger says:

    Good Afternoon George Paterson fails to implement the jQuery Plugin wordpress urgently need your help if you would kindly tell me where I put the code to work because everything I have accomplished nothing and no thank you very much for your good explanation atencion.seria requires the installation of the code.

    Att:Roger Vega.

    Buenas Tardes George Paterson no logro implementar el Plugin Jquery en wordpress es urgente necesito de su ayuda si fuera tan amable de explicarme en donde debo situar el codigo para que todo me funcione porque no e logrado nada muchas gracias por su atencion.seria bueno una explicación precisa de la instalación del código.

  16. George Paterson says:

    The JavaScript call could be added anywhere you have access, you could try creating a new template or adding the code in the body content editable in the WordPress CMS.

  17. Fil says:

    Hi Georges,

    As said already an anonymous in a comment, it seems that the video doesnt work on FireFox (9) for mac.

    Do you know why ?

    Thanks
    PS : happy new year

  18. Sandro says:

    Hi George,
    is there a possibility to integrate the PlugIn in WordPress. I’ve tried many ways to embed it in the header.php – unfortunately without success :(

    …could you help me please with my problem?

    Greetings from Germany

  19. Aw Demo says:

    Hi George! Fantastic plug-in… I’m trying to implement a Flash-less full browser video background web page (what a mouthful!) and I was wondering if it is possible to have multiple videos play one after another. Thanks in advance!

  20. George Paterson says:

    Hi Aw, sorry missed your comment, yes it is possible but would require additional code to feed the playlist.

    Hi Tanjia, the browser needs support for the HTML5 video element for the plugin to work.

    • Tanjia says:

      HTML5 ok, but I want this plugin with HTML4. Could you please say what code is required and where will I edit.

      Another problem, .mp4 video is not working here. What is the problem.

  21. Enrico says:

    Hello George, thanks for your nice jQuery plugin, i’m trying to use it in my wordpress site.
    I’ve put this code in header.php:

    jQuery(‘body’).prepend(”);
    jQuery(‘.video-background’).videobackground({
    videoSource: ['video/test.mp4',
    'video/test.webm',
    'video/test.ogv'],
    controlPosition: ‘#main’,
    poster: ‘video/test.jpg’,
    loop: ‘true’
    });

    copied the jquery.videobackground.js into the /js folder of my theme and create a /video folder with the video contents.
    The web console of Firefox give me the following error:
    jQuery(‘.video-background’).videobackground is not a function
    Have any idea of how to fix it?
    Best regards
    Enrico

  22. Nicole says:

    Is there any way to make this so that the video turns on when you mouseover the div, and turn off on mouseout?

  23. Sushanta Kumar Das says:

    Hi George, a lot of thanks for your nice jQuery plugin. I am trying to use in my website. But Here are the some problem of browser Compatible. IE9 is not working this video. Sometime working on firefox,safari. But It’s work fine on google chrome. So, How can solve this problem, please tell me.

Comment on jQuery HTML5 video background 1.0.0

Your email address will not be published.

You may use these HTMLtags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>