Background Videos: Do’s, Dont’s and Trends

Jun 13, 2017 · 4 min read

Since launching about two years ago, we’ve seen an explosion in interest and usage of background videos on websites. Of course, in the world of web design, trends come and go, but take a peek at sites across a few different industries and you’ll see that background videos (and the increasing primacy of video, in general) means that this is one trend that’s probably going to stick around.

For those uninitiated, background videos are short, looping snippets of video which play on webpages (often on the homepage) and add a cinematic, engaging element that’s a step above stock photography. Increasing internet speeds, HTML5 technology and the easy availability of HD video content have all contributed to make background videos much easier to create and implement.

If first came the “hero image,” now we’re in the age of the “hero background video.”

However, there are some basic considerations and design tips you should take into account when thinking about how to thoughtfully implement background videos.

Full screen or partial screen?

Using a full-screen background video can be great if you want users to watch a full video. However, the text on this site is too hard to read since there is not enough color contrast between the font and the video.

Silence is golden

The importance of simplicity and contrast

Aerial drone footage makes for great background videos

Since you’ll usually be overlaying text over the video itself, you also need to have enough contrast between the video and the typography so that a user can clearly read what’s on top (often your company name, brand proposition and main call to action — important!) White text over dark background videos or black text over light ones will be more readable. You can also add a filter or shading to a brightly colored background video to make it more muted.

10–15 seconds in length, or stitching together multiple shots

Adding multiple background videos across a site

Stay “on brand”

Technical issues

Background videos are a web design that we believe is here to stay, because the web is becoming increasingly video-centric and saturated across mobile, social, desktop, etc. A strategically chosen and aesthetically pleasing background video adds polish and sophistication to any website and speaks in the language (video) that users increasingly prefer.

Check out to get free background videos to use for your website, royalty free.


Behind the scenes of the creation and utilization of…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store