Navigation

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

By Sam Piggott | How To | Nov 5, 2013

Full screen images used as the background of sites have an amazing visual impact, but did you know that you can use video in exactly the same way?

After all the excitement of working with HTML5 audio, I felt it was only logical to follow-up by moving into the next realm of online rich media: the one and only <video> tag; an element introduced in the HTML5 specification, which has made the implementation of video within web layouts a virtually painless task.

In today’s video, we’ll be taking a look at using a hybrid of the <video> tag and some jQuery magic to create a full-screen background for your own website designs. Like the background-size: cover CSS3 parameter, the script will cause the video to automatically scale up and down to fit the window, whilst cropping when required to retain the aspect ratio — no stretching here!

 

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.

Share this post
Comments (no login required)
  • http://www.carlosousa.net/ Carlos Sousa

    you have set the video width with a none existing variable. I think you meant to use the scaledVideoWidth and not the scaledWidthHeight

    • Sean Church

      I’m noticed this immediately, and am curious how the code worked without the correct variable

  • The Coding Panda

    This is great Sam, thanks! Looking forward to part two!

  • Glenn Seto

    It’s incredible how the notion that autoplay media could ever be a good web design idea never dies. In the 90s we had MIDIs, last decade it was Myspace and now … well, at least we got rid of Flash. Yay?

  • Akkis

    Nice tut! Thank you Sam! Just notice that the css background-size:cover also center the background image, so we have to write a little bit code for the left property of the video element, write? Thank you again for your time :)

    • TweetsOfSumit

      yup, i also would like to see background-position: center center in addition to this

  • SkiX

    Hi Sam, what’s in app.js file?

  • djanes376

    As with anything, when using something like a video background it’s about finesse and restraint. It’s when people use these techniques to create something obnoxious is when it becomes a problem. I’m sure in the right context the tag could be done in a classy way, it’s all how you approach it.

  • http://mee-z.com mee_z

    Not a full bleed background, but the same principle with a very large video: Used the video tag. Included a highly compressed mp4 and webm file and a jpg as “backup”. Some JS to set the hight attribute; CSS sets the width. The video is set to “autoplay” and no controls. JS tries to detect iPads and then sets controls to “yes”. Some JS that pauses the video if page scrolled out of sight. http://bertslide.com

  • Nan

    Awesome..! Tkns.

  • Ken

    Nice post. I’m feeling the scaling and responsiveness with video

  • Paulo R. Pedott

    Hi Sam!
    Check please:
    http://paulopedott.com
    and
    http://works.paulopedott.com
    Thanks!

  • Fred

    Kind of off topic, but what is this for an html editor?^^

  • John Louie Binas

    what is inside the appjs?.. you didn’t mention that..

  • Timm Santana

    Great article! We used it as a header but we are working on a full page background version as well: http://www.dynamicartisans.com

  • john

    Hi Sam. I enjoyed the video tut, but i’m slightly confused as to why you used java. The method I have used before is here…

    http://kesilconsulting.com/web-designer-magazine/html-video-background-tutorial/

    It requires only html5 and css. The effect is the same, but is easier to write for.

  • Codezilla

    Video backgrounds: doing what 8 bit gifs did for websites in the ’90s. Personally, I’ll ditch the user annoyance, hard-to-see-content overlaid on top the overly busy video, and slow load times and stick to the new transitions. And as an added benefit, no matter how good the user’s screen resolution is, pure CSS-shadowing/SVG/transitions will not have to be redone in an image or video editor on a regular basis.

  • Youssef ahmani

    Very good job Sam, thanks

  • http://www.pencilscoop.com/ Joseph Howard

    The jQuery in this (for the width/height of the video) is totally unnecessary and puts extra load on the browser. I don’t understand why anyone would use it. You can use simple CSS to achieve the same results, with much less work.

  • Artur Rain

    Very nice tutorial! For anyone having trouble with Javascript and jQuery I would strongly suggest to google CodeAcademy. A very nice source to get the basic understanding. I went through different courses online and I tell you, this one is one of the best. My personal opinion.

  • cahne

    Fine!

  • Hugh

    It appears that this technique causes the video to “reload” or in effect stream the video over and over again using up high amounts of bandwidth. Is there a way to modify the code so the video doesn’t load except the first time the page loads instead?

  • B.E.A.T

    Nice tutorial !
    But “autoplay” and “loop” are html boolean properties, you don’t have to write =”true” you can just write like “required” property in form ;)
    the mere presence of the keyword enough to set the boolean to true

  • om prakash jakhar

    hey what is the role of jquery.js file and app.js file this is necessary??

  • om prakash jakhar

    can you upload your jquery.js and app.js file because i m confusing that my video is in playing but not in whole background.