jQuery HTML5 video background 1.1.1

Release 1.1.1 is now available on GitHub. This release includes a number of performance enhancements and fixes but retains the existing settings from the first release. Additionally i’ve created a number of public methods for the plugin, this will allow access to some of the internal features of the plugin.

Public methods

play:
Trigger a play/pause event on the chosen video background. Will play if the video is already paused. Will pause if the video is already playing.
mute:
Trigger a mute/unmute event on the chosen video background. Will unmute if the video is already muted. Will mute if the video is unmuted.
destroy:
Will destroy the chosen video background. Unbinds events bound when the video background is initialised and removes HTML attached to the DOM by the plugin. If a controlPosition parameter is set this will also have to be set to safely remove all HTML elements from the DOM.
resize:
When invoked this will resize the video background to the height of the document or window. The video background height affects the height of the document which affects the video background’s ability to negatively resize.

The demo page has been updated with the new code which when minified is 8Kb. You can find a shell file to minify the code in the build folder.

The source and issue tracking is available on GitHub.

61 Responses to jQuery HTML5 video background 1.1.1

  1. Delano says:

    Hi George,
    I’ve been looking around for a while for a html5 video background for my website. ( I am a film director) ANd your solution seemed so elegant to me.
    But I haven’t got the foggiest about coding. Basically I want my whole website to be video, with some info on top.
    Forgive me if my questions are not in the right place here.

    Is it possible to have more than one video? Something like a playlist with ‘previous’ and ‘next’ buttons. Also, how do you get to resize a video when it has a different aspect ratio. I shot my short film in the 2.39:1 aspect ratio (anamorphic)

    I’m trying to learn how to do all this myself, but if you could help me out a bit, I would greatly appreciate it.

    Thank you
    Delano

  2. George Paterson says:

    Hi Delano,

    It’s certainly possible to create a playlist and load a new video source when the current video ends. It’s not something i’ve implemented, i don’t know of another plugin that’ll act as a background and have a playlist, it’s something i would consider in the future but i can’t promise anything soon.

    The answer on Stack Overflow is a simple description.

    The video element doesn’t act like a CSS image background, so it will deform if the containers aspect ratios doesn’t match the videos aspect ratio. I’m sure a solution will be developed but i’m not aware of one at the moment.

    HTML5 video is an area with a lot of potential, popcorn.js for instance is very interesting but it also relatively new so not all the answers are there yet.

    • Delano says:

      Hi George,
      thanks for responding. I can indeed see all kinds of creative possibilities for HTML5 video already. But the technical side is way too complicated for me to learn in a reasonable amount of time.

      I would love to showcase all this stuff on my site combined with my work. So if you have some spare time left.. …hahaha.

      Anyway, I will keep checking in and see if you’ve added some stuff. I checked a few html5 video backgrounds and your solution runs the smoothest with the best picture quality.
      It will be interesting to see where this technology will go.

      Kind Regards
      Delano

  3. Digital-Derek says:

    George first and foremost – this is awesome! So clean, simple, and efficient. Very well done.

    I’m planning on using this for my personal portal (in development) – however, have a few questions.

    1) What would the simplest way be to loop a video? I’m going to be editing together a 1 1/2 min video with original music as the “living BG” and would like to have it loop. This may be simple, and I’d just need to dive into the JS some more (a weak are for me).

    2) I’m curious about the files you have under the video folder, and specifically their file type. From my understanding, MP4 should be all you need here, as it would playback in iOS devices (if H.264). What is the benefit of transcoding to .OGV and .WEBM? Is WebM specifically only for future chrome compatibility? Do you recommend an App/Program to transcode to these file types?

    Regardless, as I already said, this is awesome, thanks much – very impressive work.

    Best,

    -Derek

    • Digital-Derek says:

      Apologies, I figured out the looping question – asked before I really dug in. Am still curious about the file types though, and again – thank you!

  4. George Paterson says:

    For cross browser support of video this is a good reference: http://caniuse.com/video with the sub-features for formats below the table.

    Basically you’ll need WEBM to support Firefox and Opera while Chrome may be dropping MP4.

    Also if you’re looking at iOS, iPhone has an app based video player and won’t play video in the web page, iPad will work as expected.

  5. Digital-Derek says:

    Wow, for some reason I didn’t realize that about FF and MP4 – very good to know, am a little surprised, but live and learn.

    One last question (I hope!) – I have everything working as I’d like now – my only issue is trying to adjust where the play and mute buttons appear on the page, and am having some difficulty moving them to where I’d like. Any simple trick here to move them? I may be biting off more than I know how to handle – regardless, thanks a lot for everything, been a fun project working on this.

  6. George Paterson says:

    The plugin option controlPosition will allow you to say which HTML element, class or ID you want to append the controls to. Once you’ve done that you’ll probably need the CSS position absolute to move it around as needed.

  7. Digital-Derek says:

    Awesome, thanks so much again for the return comments – will work on this some more tonight, and won’t ask anymore questions, lol

    Here’s where I’m at so far, tons of thanks again, been real fun playing with – love the idea of making website NOT look like website – http://www.digital-derek

    Adding WebM and OGV files tonight, so best on Chrome for now – I found an excellent transcoder that works great on a Mac – it’s pretty much drag and drop, open source, and free :) http://www.mirovideoconverter.com/

    Thanks a million again!

  8. Stephan says:

    Hi George,

    we tried Your video background script, but it doesn’t play the video in different Browsers. Even Your demo page will not work as expected in Safari 5.1, Internet Explorer 8.0 and mobile Safari on iOS 5. It showas only the poster pic or nothing at all :(

    Do You have any bugfix for that ?

    Thanks in advance,
    Stephan

  9. Johan says:

    Hi George

    I love this script and will most likely be using it on a website here soon.
    I have a few problems though.
    The video background resizes up just fine, but I can’t manage to resize it back down again. When I make the browser window smaller the video stays large.

    The read me says: “resize: When invoked this will resize the video background to the height of the document or window. The video background height affects the height of the document which affects the video background’s ability to negatively resize.”

    Am I able to change this setting or is it not possible?
    Looking at your example it behaves the same way as mine.

  10. George Paterson says:

    Hi guys,

    IE8 won’t work as HTML5 video isn’t supported, for iOS, iPhone’s don’t play video in the web browser but have a separate video player so a background won’t work, iPad should work though. Safari 5.1 should also work, try placing the mp4 as the first video, this is what i’ve just done in the demo page.

    For resizing it’s not a setting but how the browser deals with elements in the page. I don’t have a work around at the moment it’s something I’ll look at making a simple method for it but it is possible to manually resize the video with JavaScript.

    Hope that helps.

  11. khan says:

    Hi George ,

    Nice coding, i really enjoyed. Can you please tell me how to change the opacity of the video ?

    Thanks

  12. Jedd says:

    Hi George,

    What a fantastic plugin! Works like a dream on modern browsers pulling video locally…

    …but Firefox won’t grab the video from a remote server. Stops after an initial connection. Firebug says “206 partial content”. Have you encountered this?

    Thank you for your excellent work!

  13. George Paterson says:

    Khan you should try setting it through the CSS opacity declaration, caniuse.com/css-opacity or you could use jQuery to set opacity api.jquery.com/fadeTo/.

    Jedd when i originally developed the plugin i used the videos available on html5demos.com/video so it should be able to get video from the remote server, try the videos from there as well.

    If you can play those files then perhaps there’s a problem with the server you’re getting the videos from? Is the video large and it’s dropping connection or perhaps the server needs to know the video mime type? An example would be useful if you can share it?

  14. marko says:

    Hi! Good tutorial, very interesting but only a question. How can I crete the .ogv and .webm videos? There is a plugin? I tried to testing with after effects but not work.

    Thank you so much in advance.

    Marko

  15. George says:

    Hello, George!
    Thanks for perfect plugin!
    In Chrome it work great, but in Opera or FF i have a problem – the video it to large,I thought that it was only problem of my site, but i tested your demo page on this browsers and found such problem on it too.
    may be you know how to solve an extra large height in videos in opera and firefox?
    Thanks for answer
    p.s. sorry for my English – im from Russia=)

  16. Lawrence says:

    You made quite a jewel there George! And I know its a work in progress and can’t wait for more!!! :D

    Putting those goodies on my website, ran into a few coding problems but no biggie. Feel free to checkout, critique and comment my site, I could use the professional observation :)

  17. Paulo says:

    hi, george

    Thanks for perfect plugin! but i need to have an alternative when the website is loaded in ie8 and versions of firefox. You have any ideia? Maybe Flash?

    Thanks

  18. George Paterson says:

    Hi, yeah if the browser doesn’t support HTML5 video then this plugin won’t work. For IE8 you’d need a Flash alternative, unfortunately i don’t have the time to development at the moment.

  19. tais says:

    Hi,
    I like this video background a lot.
    I was planning to add it to my site but i can’t understand how to resize it to window negatively. The video size scale more and more bigger never smaller.
    Can you point me in the right direction?
    thx

  20. George Paterson says:

    Hi, it’s not something i was able to resolve at the time, i couldn’t find a simple way of negatively resizing. The video background is a DOM element which affects the ability to measure the page height, unlike a CSS background image that resizes the image as a proportion of the exist DOM element.

    I would suggest keeping a history of the size of the page/video and resizing negatively if the video is large than all the other elements in the page. I have a lot of project work on at the moment so can’t look for a solution at the moment.

  21. Bernard says:

    Is it possible to make two diffrent buttons: one for play and one for pause? I am seaching solution to make working this script. $(‘.video-background’).videobackground(‘pause’);

  22. worldwildweb says:

    here is more details:
    issue :
    the plugin demo site:
    http://www.georgepaterson.com/sandbox/jquery-html5-video-background-demo/

    the video plays in Firefox

    my demo site:
    http://willychataigner.com/2020/georgepaterson-jquery-videobackground-8b3535a/

    the video doesn’t play in Firefox

    something i have noticed is that when i try the 3 different video format url in a new window

    these 3 video format play for the plugin demo site:

    http://www.georgepaterson.com/wp-content/uploads/jquery/jquery-videobackground/video/big-buck-bunny.mp4

    http://www.georgepaterson.com/wp-content/uploads/jquery/jquery-videobackground/video/big-buck-bunny.webm

    http://www.georgepaterson.com/wp-content/uploads/jquery/jquery-videobackground/video/big-buck-bunny.ogv

    but on my demo site these 3 video format don’t play. i get a window to save the video on my computer

    http://www.willychataigner.com/2020/georgepaterson-jquery-videobackground-8b3535a/video/big-buck-bunny.webm

    http://www.willychataigner.com/2020/georgepaterson-jquery-videobackground-8b3535a/video/big-buck-bunny.ogv

    I thought that this might be a hosting issue but i tested on 3 different hosting server and same issue!

    Can someone tell me what’s wrong?

    Thanks and good day

  23. worldwildweb says:

    i will answer my own question.
    i just added that to my htaccess

    # ———————————————————————-
    # Proper MIME type for all files
    # ———————————————————————-

    # Video
    AddType video/ogg ogv
    AddType video/mp4 mp4 m4v
    AddType video/webm webm

  24. George Paterson says:

    Nice one worldwildweb.

    It is possible Bernard. You can hide the default controls and attach the play/pause events to elements of your choice that trigger their public methods.

    $(‘.video-background’).videobackground(‘play’);

    $(‘.video-background’).videobackground(‘pause’);

  25. Sven says:

    Hello,

    can you please tell me where i can enable the loop function for the Video. I just readed on your Webside, that it is set default on FALSE. But where and how to enable?

    Thanks.
    Sven

  26. JMonrowe says:

    I love this concept, having a video as background. And I first came across this effect on YCOYACHT.COM. So, when I uploaded the same site on my iPad (First Generation), I was expecting the poster image to replace the video. It performed as expected, except the image didn’t cover the full screen; there’s a least a 50px gap between the image and the left side of screen. I’d tried your example page and the same result.

    Do you know how this can be resolved. I will love to use this plugin on a future site, but I’m afraid that this hiccup will throw off the look/effect.

    Thank you, in advance.

  27. Yuri says:

    Ahoy George! hope all is well!

    Just wanted to ask If you came up with perfect file size that a video should be and whether you were playing with perfect encoding quality for it?

    Thanks!

  28. George Paterson says:

    Hey Yuri, no it’s more down to your user base and site setup. You may consider 16:9 or 4:3 for ratios, sub 5Mb for size but it depends on the video content for pixel density.

    JMonrowe that is a very well shot video, really sets the site off. I had only really considered the poster as a backup element. I don’t think i’ll have time to look at a solution. Reuse of the resize may help, or you could ignore the poster element and set the image as a background. You may also want to look at fading the poster image to a fixed colour background.

  29. kelotz says:

    Hi,

    Thanks for this jQuery plugin.
    Only one question: Is there any option to preload or make a preloader
    before starting the video?

    Thanks,
    Raul

  30. George Paterson says:

    Hi Kelotz, there’s a preload option that sets the preload attribute on the video tag. Set preload to auto and in theory the video should attempt to download before play is triggered. If autoplay is on though this will override preload as the video will attempt to play as soon as possible.

    If you want a delayed autoplay you may want to set preload to auto and autoplay to false, then after the DOM has loaded use a setTimeout to trigger the play public method.

  31. Max says:

    Hi George

    Great plugin.

    Have you been able to check this on the ipad? I’m trying to get the backup image to show correctly. There are currently 2 issues:

    1) The image is not being resized to fit the screen (currently the image is too zoomed in)

    2) There is a ~30px left margin before the image.

    Thanks George
    Max

    I’m trying to get the backup image to show correctly on the ipad. Currently it is

  32. Chris J. says:

    Hi George. This is soo cool! Great work. I have run into a snag. I uploaded your files and videos to my server (to make sure my server could run it). It works great, however all I did was changed the mp4, ogv and webm files and now it does not work. I even named the new files the same as you had the original video files. I am sure I am doing something wrong but can’t figure it out. Do I need to change the permissions of the video files?

    Thanks so much for your help and amazing plugin!

    • Chris J. says:

      Sorry, I should have mentioned that it plays in Chrome, but not the other browsers (IE9, Firefox, Safari).

      • Chris J. says:

        Ahh, I found it. I set the MIME types on the server. I do have one question though. As it is now after the video ends the screen goes black. How can I set it so the poster image shows once the video ends?

        Thanks so much!

  33. George Paterson says:

    Hi Chris, cool that you got it sorted. You’ll want to use the loadedCallback to bind the ‘ended’ event to the video element. On trigger of this event you can load the poster image in.

    Jason, that isn’t a video but a series of images and is leveraging a parallax scrolling effect.

    Sven it’s an option that can be set to true when declaring the plugin.

    Sorry Max, i don’t have an iPad to test on at the moment, although i’m very tempted to get one for errr… testing purposes.

  34. Janny says:

    Hi George,

    I’m currently building my own site and your plugin is just fit. However, I want the video only play when it’s loaded completely. How can I do that? I tried set autoplay: false and trigger play video in loadedCallback() but it doesn’t work.

  35. George Paterson says:

    Hi, i don’t think there is an event available to know if a video has completely loaded, the preload attribute can allow the browser to choose.

    I’ll be reviewing the plugin in the near future as there is stuff i’d like to include based on feedback but i won’t be able to investigate right now.

  36. Anthony says:

    First of all, great file! It made my site that I am working on actually have a little extra! I have been reading the comments and I know that this is not supported yet with Safari or IE. However, they will be coming out with their full blown HTML5 browsers soon I believe. My question however, in the meantime, will you be developing the Flash Plugin as a back up for the browsers that do not yet support HTML5 fully? Again thank you for the beautiful plug-in.

    Sincerely,
    Anthony

  37. Anthony says:

    Actually I found out that the reason why it wasn’t working in those were because my .mp4 file was corrupt. However, after fixing this problem the video seems to be very jumpy and not a smooth picture. Along with that it still does not come up on IE9, do you know why this is, or am I doing something stupid and just missing a step?

    Sincerely,

    Anthony

  38. David Georges says:

    Hello George,

    Thank you for this great plugin !

    All seems to work perfectly exept on my iPad (The video is not played, even if I try with a m4v video) and the poster image do not cover the entire screen (there is a left gap as mentionned by others above).

  39. Dan Arandia says:

    Hello George,
    let me start by thanking you for developing a GREAT plugin! I’ve implemented it on our new company website, but noticed in Safari 5.1.7(Mac) the video doesn’t seem to play.

    It works just fine in FF, Chrome, IE9, Safari 5.1.7(Pc) and Safari 5.0.6(Mac).

    Have I coded something incorrectly that is conflicting with Mac Safari 5.1.7? Here is where I’ve used the plugin – http://www.i-ology.com/

    • Dan Arandia says:

      Hi George, thank you for the prompt response.

      My coworkers who are on Macs tell me they still don’t see the video playing. They are on Os X Lion, Safari 5.1.5. Good thing is that the poster image still loads correctly and fills the browser window nicely.

      I asked them to upgrade to Safari 5.1.7 and still no luck for them.

  40. Sharon McGrath says:

    Hi George,

    Amazing plugin..hate to do this but I have an exhibition opening in two hours & I can’t get it to loop at all..I would say I’d not very good at HTML at all & I’ve tried everything I thought it might be but I can’t get it to loop..
    It’s probably really simple..if you could just throw me a lifeline, I’d be forever grateful!

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

  42. George Paterson says:

    Hi Sushanta, do you have a link to where you’re deploying the plugin?

    Hi Phillip, this site is WordPress based, i’ve linked the JavaScript and called the plugin in a new template i created just for that purpose.

    To be honest it can probably go anywhere including a content managed page.

    I’m prepending the div container for the video background to the body tag before loading the video background in to that div. Since the div is absolutely positioned and set to the height and width of the viewport as long as the div is higher in the DOM it will sit behind whatever you need. So the plugin itself a pretty much self contained. However there’s no widget integration it’s all manual.

Comment on jQuery HTML5 video background 1.1.1

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>