How to use video backgrounds for incredible visual impact, part 2

In the previous part of this tutorial, using a mixture of HTML5, jQuery and CSS, we constructed the barebones functionality of our HTML5-driven full-screen video background. This time, we’re going to be styling it, preparing fallbacks for it, and understanding how it can be used as part of your own working designs. In today’s guide, we’ll be adding to our fullscreen video in a number of ways, including:

  • creating our own pattern overlays to sit over the top of our video; such as old-television-style scan lines, styling your video to suit your own design;
  • converting our video to multiple formats to enable universal cross-browser support for your video background.

Along with all of this, I’ll also show an example of how the video can be used creatively by layering other elements over the top of it, showing you how this powerful technique can fuel your own new designs; or even provide a new, exciting background for that design you’re currently working on!

Have you used fullscreen video as a background in one of your designs? Do you have a preferred method of implementation? Let us know in the comments.

0 shares
  • http://riastuff.com/ Ria Parish

    That is awesome. Might take me some time but I’ll do something with this sooner or later.

  • Luke Cooper

    great idea with the dots and lines! Love the end result.

    Noob question I’m sure, how did you leave a ‘break’ in the page template you showed at the end?

  • HemanthMalli

    Good post !! I haven’t create any video background websites yet. But want to make one ..

    http://www.jacksonvillewebdesignservices.com

  • Solomon Scott

    This is awesome! I tried it and it works like a charm. Definitely going to be using this on a project.

  • steflp

    hello,

    At Home I ve 2 monitors and then the script dont work well ( there are somme blank side)
    At Work I ve 3 monitors and then the script dont work well to !
    I suppose the script works well with only One monitor display … I try it later on PC with 1 display minitor

    • steflp

      Hello my own answer , there is a little mistake in the video Tutorial and now it works very fine .. !!!
      here is : http://www.warrenbarguil.fr

  • Ioannis KarAvas

    Sam, first off great article! Thanks for sharing your insight!
    I just wanted to mention one serious problem with HTML5 video, which remains unresolved. HTML5 video is actually rendered differently in each device/browser, which results in uneven coloring (can be seen in Safari vs Chrome/Firefox) I’ve been trying for a long time to match a background color to a borderless html5 video to no avail. It’s an mpeg-4 issue / Quicktime issue and as far as I can see it remains unresolved. So in short, you cannot blend a video seamlessly.

    • Andy Astrand

      Couldn’t you try and pull the RGB value of the top left pixel of the first frame of the video as rendered on your page using HTML5/Canvas etc and then use javascript to set it on other elements.

      Of course the final ‘filtering’ thats mucking up your colours may be happening after the buffer you can access but I would have felt there’s a fair chance it would work.

      This site has a fair number of helpful demos for how you can manipulate the video frames in JS and get hold of their raw pixel values.

      http://html5doctor.com/video-canvas-magic/

      Interesting concept if it works, you could even have the background of the site or frame of the video change to match the average colour of the border of the video and have it act like a Philips ambilight tv.

      • Ioannis KarAvas

        I love it when probable solutions give birth to great ideas! :P

  • http://www.anistock.com/ Anistock

    super article, I particularly like the technical detail , opens up all sorts of possibilities for a video background

  • Billy

    Awesome tutorial! Will the video background work on tablets and phones as scripted in the tutorial? I been using a video background on my page for a while. It is a code snippet I purchased that is using a javascript custom made by the developer and I now am experiencing an issue where it will not play the video on my Nexus 7 and my android phone using the Chrome android browser. Just a black background. Wondering if your tutorial works on tablet and phones?