Full Page Background Video

  • follow us in feedly
Published March 2, 2014 by Brad Knutson
Full Page Background Image

An interesting design trend that I’ve seen on a few high-end websites is the use of full page background videos. We’ve all seen full page background images, but using a video as your background is taking it to the next level.

It’s a pretty cool concept, and one that a lot of of newly designed sites are utilizing. Perhaps it’s something you want to use for your next project? Interesting in learning how to create this effect?

Demo

Here is a demo. The video is in an iframe – if you want to see the video at full page size, click the demo button below.

View Demo In Full Screen

Give the video a minute to load, it is a little bit large (sorry…).

As you can see, the video stretches to fit the screen size, and it’s even possible to overlay text over the top.

Let’s dive in to some HTML and CSS to reproduce this effect.

The HTML

This is just a standard implementation of the HTML5 video tag. In this example, I chose not to use a fallback video format such as WebM – but if you plan on supporting older versions of browsers (namely Firefox) then you probably should.

If you’re not familiar with the video tag, I suggest you read up on it. In this example, I chose to use the autoplay and loop attributes.

Nothing out of the ordinary here.

The CSS

If you have any experience with CSS, there really isn’t anything particularly impressive here.

Essentially, we’re positioning the video in a “fixed” position with a width and height to fix the screen. Because of this, it will always fill the screen, and because of the position: fixed we can position text or any other HTML elements right on top of it.

I added the background: url(demo.png) no-repeat; line to support older browsers that don’t have support for the HTML5 video tag.

Bonus Tip

If you choose to use this technique on your next build, here are a few useful tips to follow to make sure your background video looks the best it can.

  1. Find a high quality video – if the video isn’t HD, it might get blurry when stretched to large screen sizes. Think YouTube videos on “fullscreen” on a 42 inch monitor.
  2. Find a video that loops gracefully – the video should loop gracefully, otherwise the transition will be poor and it will draw attention. Drawing attention away from the content on your site isn’t the goal here.
  3. Find a video that isn’t too distracting – if you plan on overlaying content over the video, it’s probably in your best interest to find a video that isn’t all that distracting. Unless of course distracting is what you’re going for
  4. Find a video that is 15-30 seconds long (ideally) – shorter videos will look strange as your reader will begin to notice the footage is looping frequently.

View Demo

Good luck!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

One thought on “Full Page Background Video

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">