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?
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.
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.
<video autoplay loop poster="demo.png" class="backgroundvideo">
<source src="demo.mp4" type="video/mp4">
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
Nothing out of the ordinary here.
background: url(demo.png) no-repeat;
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.
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.
- 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.
- 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.
- 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
- 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.