full-screen-video-background-large

A few things to think about before using a full-screen video background

Ashley Gainer's Layout avatar

Looking for a web design feature that delivers massive impact with a hyper-cool appeal? Consider the full-screen video background.

The full-screen video background is a really neat trick (when it’s done well). But how do you know if it’s the right feature for your site? Let’s break down some of the reasons they’re great,  and some of the reasons they can be not-so-great.

Why you should do a full-screen video background

Web design is a visual art and if you’re going for visual impact, there’s nothing like a full-screen video background. It’s captivating from one edge of the frame to the other, and nothing else out there has that kind of impact. You want your design to stand out, after all. When they’re done well, they’re absolutely stunning.

It’s also much easier to set one up these days, thanks to HTML5. Whether you code it or use a plugin, it’s a much more accessible design feature now than it used to be.

Videos work great on sites that would otherwise employ a pretty minimalistic, slimmed-down design. If you have a project that might lend itself to a design with a reduced number of visual elements on the homepage, you may be dealing with a great contender for a video background.

 full-screen-video-background-minimal

So what are some ideal applications for video backgrounds? In a quick survey of video background sites, I saw quite a few set up for artists and musicians, studios and agencies, and even a few (perhaps less successfully designed) storefronts. Video backgrounds work great for single-purpose site pages — things like login or registration pages, landing pages, or splash pages. They make a great “doorway” of sorts to the “real content” of the site. Video backgrounds convey a sense of mystery, artistry, and individualism, among other things. There’s a lot you can play with if you’ve got the right project.

Why you shouldn’t do a full-screen video background

While I happen to like a nicely done full-screen video background, there are definitely times when it doesn’t make sense. In fact, for many websites, it doesn’t make sense.

Probably the biggest drawback, logistics-wise, to a video background is the fact that they look great on desktop but don’t transition to mobile well. And as we all know, mobile is critical for web design these days. One specific sticking point is that there’s not an easy way to make sure the video will do what it’s supposed to do when the site is squished down to a tiny screen. You’ll need to include some extra coding to make sure the video stays centered when it’s bigger than the container it’s in (which is going to happen on a mobile screen). If you’re committed to the video background, a potential workaround for mobile is to have a stand-in gif or image.

Logistics aside, there are times (many times) when video just isn’t right for the site you’re working on.

full-screen-video-background-camera

This is particularly true when you consider the purpose of the site. It’s easy to get distracted by the shiny new prospect of a design project, but you must never lose sight of the purpose of the site. “Good design makes it easy for site visitors to do whatever they’re coming to the site to do. ” There are some sites – many sites, really – that shouldn’t have a minimalistic homepage, and there’s no real way to make a video background work without minimalist design overtop it. If stripping down the homepage elements makes it difficult for site visitors to do what they’re there to do, you need to avoid the video background for this one.

If you’re on the fence, consider the site’s primary audience. Are they impressed by slick design, or will it be more likely to confuse or annoy them?

Final thoughts on video backgrounds

While these have been around for a couple of years now, they certainly aren’t passe. They can be an incredibly powerful design element for the right project, and these days, implementing them is easier than ever. But a full-screen video background is definitely not right for every project, so consider the purpose of the site you’re designing when you want to include a video background. If video will inhibit or detract from the site’s overall purpose, it’s best to find an alternative. But if there’s room to make it work with a stripped-down design in the foreground, you’ve got room to create something with tremendous impact.

Comments ( 0 )

Join the discussion