Skip to main navigation Skip to main content


Phone: (877)244‑9322

Our Blog

The Background On Video Backgrounds

CatCordThe modern web’s focus on simplicity and flexibility lends itself to big, bold imagery and typography. You may have noticed a trend toward large, photographic background images on new websites. These offer a captivating visual experience and establish a mood while communicating useful information. Used properly, large background images are more than just decorative fluff.

Now there’s a new tool in the web marketing kit, made possible by faster internet connections and more capable devices—video backgrounds on web pages, rather than static images. When used correctly, video integrated into your website’s design can make for a truly stunning experience. But used poorly, video can compound clutter and confusion. What steps can you take to ensure video is properly enhancing your website?

Rules to Autoplay By

Video backgrounds stay, well, in the background. Usually they’re overlapped by static content, such as a logo, headline, or call to action. This overlaid content is the main area of focus for readers, not the video. One way to think about a video background is literally as a “motion picture.” It’s the type of content you might use a static image for, but you’re spicing it up with a bit of extra motion.

Usually, video backgrounds start playing as soon as the page loads. Rarely do they include controls to start, pause, or skip. Their composition and subject matter are simple, with the primary purpose of conveying a general branding message and setting the tone. They aren’t meant to communicate a complex message like a movie or commercial would.

The requirements for preparing video to use as a background are different from those for producing for standalone presentation. Not all videos are suitable to use as a background, so it pays to be picky.

Complement with Simplicity

Overlaid content should be sharp and legible. Video that’s too bright, too busy, or that contains fast motion or abrupt edits can hinder this. To compensate, many video backgrounds are toned back or processed with color effects. Restrained motion, smooth edits, and static areas within the video composition can also help.

Think about how long a visitor might stay on your page to judge a good length for your video. The longer the video, the larger the file that needs to be downloaded to the browser, so it’s important to strike a balance. If run time exceeds 30 seconds, it’s probably time for some pruning. No use loading content nobody is going to stick around to watch.

Silence Is Golden

While it may be acceptable to start playing a video automatically after it loads, it’s bad etiquette to play audio without the viewer’s permission. Were you ever in an office or busy coffee shop when suddenly a website started blasting sound from your speakers without warning? It’s annoying, and there’s no faster way to turn a potential client against you.

A video background shouldn’t depend on audio to get its point across. If there is some type of audio that accompanies the video, such as music, it should be muted when the video loads, and the viewer must take action to unmute it. Sometimes it’s better to let the pictures do the talking.

Be Nice to the Device

Technology has come a long way in allowing us to compress video to small file sizes so it streams quickly while retaining a high level of quality. Regardless, video files are still weighty compared to text and image files, and they require a fast processor to run smoothly. Video may load slowly or look choppy on small devices on a mobile data connection. Also, many mobile data providers charge by the amount of bandwidth used, or have monthly caps. Video files eat up some of this allowance without offering much high-priority content in return. Large devices, such as desktop, notebook, or tablet computers on broadband connections, don’t have these limitations.

Luckily, you can serve the same web page to all visitors and tailor it for the best experience using responsive design. Video can be hidden from small devices and loaded only on large devices with the bandwidth and screen size to showcase the media properly.

Have a Fallback Plan

Some smartphones and tablets disable auto-playing video, and older devices may lack the capability to play web video files. Web pages should always be built with a fallback in case a video can’t load. A still image or different page layout is better than an obviously broken feature.

Wrap It Up Right

So, you have a great-looking video background ready for your site. It’s well composed, well edited, and sets the mood without competing with foreground content. It loads, it plays, then…? You need to have a plan for how your video will end. It could loop back to the beginning and start again, end on a nice-looking freeze frame, or even pause and load a new video. Plan the sequence of imagery so the video conveys its message strongly throughout, then ends gracefully without an abrupt or awkward transition.

More Examples of Video Backgrounds