How to Use Video Background On Your Website – The Right Way!

Last updated on June 6, 2017

I wonder what you’re looking at?

how to use video background on your website

Source: 11coffee.co.uk

I bet your attention automatically tuned into the video background, right?  It’s almost impossible to ignore it as it is moving.

There’s nothing wrong with you – it’s just human nature and how we subconsciously decide where to pay our attention to.

We are easily distracted by anything that moves – just like that dog that ignores everything in its world to chase that pesky little squirrel!

Okay, you got me to look at your silly video, what does this have to do with my website design?

What a great question and I’m glad you asked.

A video background on your website, if used properly, can help you capture your website visitors’ attention too!

Video background is one of the most popular website design trend that seems to be here to stay.

Marketers love video backgrounds because they make websites look modern and create a sense of artistry that static background images simply can’t match up to.

Many website conversion experts and regular people alike see their visitors stay on their websites longer and more likely to sign up or opt-in to their product / service offers.

138% improvement in conversion when switching to video background on a homepage.

Source: FoodBloggerPro

I’ll admit – a 138% improvement sounds extraordinary and challenging to achieve every other day.

Keep in mind that such high figure is from tests ran by conversion / business optimization professionals who do this for a living. So it’s fair to say not everybody who runs a DIY website will see similar improvements, just by adding a video background to their website.

However, even a 10% – 20% improvement in engagement and conversion is not unreasonable for even a first-time website owners with no professional help  – if you use video background on your homepage the right way!

Imagine if you collected email newsletter subscribers so you can follow up with special promotions or share interesting discussions to build your brand.

Consider what a 20% increase in subscribers can do to your business? This can mean more sales and/or higher brand awareness!

All this can be done if you can capture your visitors’ attention more effectively – by using a video background.

This is not just a hypothetical idea. A lot of real life case studies have demonstrated how many businesses have succeeded by using video backgrounds to improve sales.

Like all things in life, there is a right way and a wrong way of doing things.

Even with something as groundbreaking as a video background, you can still screw it up and end up hurting your overall website design and experience – if you don’t abide by some basic rules.

So, understanding how to avoid basic mistakes when using a video background on your homepage can give you a much higher chance of succeeding in improving your web design.

In this guide, we will show you all the steps and best practices you should take to use video background effectively:

  1. How to use video background the right way?
  2. Where to find videos for your website?
  3. How to add a video background to your website?

Let’s get started….

 

How To Use A Video Background – The Right Way

“I just need to stick a random video on my website background and I’ll get better conversion results!”

If this is what you are thinking, then good luck because you’ll need it.

We at WBE don’t believe in luck.

We believe anyone with little to zero website building skills can also succeed at designing a professional website – if you just follow some simple rules (just like these other design guides we’ve created specifically for those who weren’t born with a good sense of design).

True to our beliefs, we’ve created a road map that you can easily follow to get amazing results.

 

Part 1: When Should You Use Video Background on Your Website?

Video background is most effective when you use it to (1) create a vibe, (2) to set a tone or (3) to induce an emotional reaction.

Let’s check out some examples:

Example #1: Businesses, Services, Organizations

Video backgrounds work for most professional websites, whether you are running a clinic, consultancy business, or design agency.

You can use a video background to show clips of the life of your staff or even the process of helping a customer. This gives your potential clients a chance to get to know you before even talking to you. It also paints a very vivid visual representation of what they can expect to experience from your business.

how to use video background on your website

Click to Play – Source: Premisehealth.com

Premise Health is a private healthcare provider. Notice how they mix video clips of people running and doing yoga, with clips of people talking to the doctors.

This helps create a feeling of health and wellness – basically how Premise Health can improve your life.

how to use video background on your website

Click to Play – Source: Grainandmortar.com

Grain & Mortar is a design agency. This example is interesting because it shows you that you don’t always need to have a full page video background to get a similar benefit. They only display a video in the header section of the page that takes no more than half the screen real estate.

The video shows the daily collaboration of the staff (strategy sessions) and how they create design solutions for their clients.

Example #2: Physical or Digital Products

Video backgrounds also work very well if you are selling products.

Create a video that shows people using your product, so they can visually experience the act of using it.

The key here is to inspire the type of life your customers could have if they purchased and used your product. By showing them a certain lifestyle, you make them want what you are showing them.  Classic marketing 101 stuff.

Basically, you’re already convincing to them before they read a signal word on your website!

how to use video background on your website

Click to Play – Source: Fitradio.com

Fit Radio is a music app for workouts. The video is very effective in showing its potential customers how much more enjoyable it is to workout with the app.

You can use this idea to showcase how life could be with when using physical products or digital / educational products (e.g. learning a second language and traveling).

Example #3: Experiences (Events, Tours, Hospitality)

Video background is especially effective to create a sense of excitement or vibe, so why not use it to take your audience on an adventure?

This works really well if you are an event planner, operate a B&B or hotel, tour guide or anything that deals with destination experiences.

how to use video background on your website

Click to Play – Source: Visithumboldt.com

The website example deploys one of my favorite uses of video backgrounds as they promote tourism for California’s Redwood Coast.

The video takes you on a journey in the region and creates a storyline or experience similar to Alice in Wonderland. This is so effective that makes me want to plan a trip there!

Example #4: Physical Locations (Restaurants, Hotels, Galleries, Stores)

Restaurants, cafés, hotels, shops or any physical settings can use video backgrounds to showcase their location and give their customers a visual guided tour.

You get to control their visual experiences on screen, and is a very simple yet effective method to create a desire to want to visit your physical location!

how to use video background on your website

Click to Play – Source: Vandalnewyork.com

Vandal is a restaurant in New York. They use a video background to showcase their trendy interior design to entice you to go and visit.

how to use video background on your website

Click to Play – Source: Wix.com

While this is a video background template from Wix and not a “live” website, the video is very good (click on it to see for yourself).

It shows the chef plating food fresh out of the pan. Your mouth starts to water just by looking at it – at least it did for me as I haven’t had my lunch yet (at the time I’m writing this anyway!)  This video is very effective!

 

We are only scratching the surface as to what businesses or websites can use video backgrounds:

  • Spa – you can create a sense of luxury, calmness, and relaxation by showing clips of popular treatments and happy guests using the facilities.
  • Hotels /B&B / Vacation Rentals – you can show a video of the accommodation, services you provide and nearby activities to create excitement and a sense of adventure.
  • Businesses / Products – you can create a stronger brand by using a video that expresses the essence of your product. For example, if you are selling athletic gears, you can show clips of people working out and having a good time – inspiring your website visitors to want to have similar experiences and results.

The list goes on and you can almost take advantage of a video background no matter what your website is about.

Important: Don’t pick just any video because it looks good.  The video you pick has to be relevant to the overall purpose of your website or your business. Picking just a “nice” video can make your website more interesting. But picking the “right” video that highlights what your business / product can deliver is a very powerful marketing and branding tool.

Now, look at your own website and imagine how a video background can help transform your design and take your branding and user engagement to the next level.

If you don’t have a website set up yet, we’ll show you some options below where you can find a website builder that offers video background capabilities.

 

Part 2: When You Should NOT Use Video Background on Your Website?

While a video background is very effective in grabbing attention, this can backfire if you want your audience to focus on very specific content on your website.

Why? Because a video could potentially grab too much attention and so if it was used too aggressively, it could overpower other pieces of content that you want your visitors to focus on.

This is why a video background is generally not a good idea if you have a complex service or product that needs a detailed explanation for your audience to understand.

In these situations, the video background might distract your visitor from focusing on specific, important points.

So, review your website and your business and see if you fit this profile. Design tools like video backgrounds are meant to help improve experience. If it doesn’t make your website better, don’t feel pressured to use it.

Video background is a tool to help improve your website experience. If this tool doesn’t fit your website or business profile – when in doubt, leave it out!

 

Part 3: 5 Golden Rules to Follow When Using a Video Background

While different video content works well for different websites, there are a few “dummy-proof rules” that can be applied to help you create the best experience for your website.

This is not the list that ends all list, but it is a good starting point to direct you down the right path so you can avoid some very common, yet deadly mistakes.

 

Rule #1: Only use a video with a purpose

Video with a purpose helps to reinforce your branding or the message you are trying to communicate.

For example, if you are an accountant, you shouldn’t show a video that highlights some beautiful landscape from the Swiss Alps! While it may look beautiful, it probably doesn’t have much to do with your business or representing who you are. In other words, the video might be irrelevant and fails to highlight your business.

Furthermore, it might confuse your potential clients: “Is this an outdoor gear supply store? Or is this site selling me a vacation package to Switzerland?

Make sure the video you choose for your background complements what your homepage is trying to achieve.

Rule #2: Don’t let your video compete with your content

You will very likely have text or some kind of content on top of your video background. So make sure the video does not hurt the readability of your content above the video.

If it does, then your visitor will have a tough time reading the information.

How do you do that?

Option 1: Choose contrasting content color

Make sure the color of your content (such as text, button) contrasts against your video.

For example, if you have a darker video, use white in your logo, button, and any text. This will make it pop.

If you are using a lighter video, use more colorful or darker colors in your content.

This technique can help create the contrast you need so your content does not blend into the video background.

how to use video background on website

Source: Fitradio.com

Fit Radio does a good job in highlighting the content by using white and yellow. They really pop from the darker video background.

Option 2: Overlay your video background with dark or light screen

If you are using a very vibrant video background with a lot of details, it can make your content hard to read even if you use the right contrasting color in your content.

This is when you want to decrease the intensity of your video background with a dark or light overlay.

This will make your video background darker or lighter than the original and mellow down any details that are making your content hard to read.

how to use video background on website
how to use video background on website
Dark Overlay Example – Forty
Light Overlay Example – Cobble Hill

Option 3: Overlay your video background with color

You can also overlay your video with color. It gives you a similar effect as option 2 above, with the additional benefit of creating a stronger branding when you use your brand color as your overlay.

In most cases, white content color will work best with almost all color overlays.

how to use video background on website
how to use video background on website
how to use video background on website
Source:Focus Lab
Source: Harbr
Source: Sudio Wolf
 

Rule #3: Use short video clips that loops

Your website loading speed is a big concern when using a video background, since video files can be large and may take longer to load.

Research has shown that poor website loading speed can cause your visitors to leave your website prematurely, and possibly lowering your search engine rankings.

The key to improving your website loading speed when using a video background is to keep the video short and video file small.

Rule of Thumb: Try to limit the video to 5-10 seconds long, and the video file size to 6MB or less. You can loop your video continuously to give the impression that the video is longer than it really is.

You’re not making a major motion picture here, so if your video file size is too large, make sure you shorten it and /or reduce the quality of the video.

If you need help with editing your videos to the exact length and size but don’t know how to do this yourself, Fiverr.com is a great option where you can find some professional help with minor editing, at very reasonable costs.

Rule #4: Use video without audio

Audio that auto-plays once a web page loads is ranked as one of most annoying things when it comes to website experiences – especially if it starts blasting when you are in the office!

Video background automatically plays when you load the website. So if your video has audio, it will also play automatically.

So if your video clip comes with audio, either remove it (use Fiverr.com) or mute the audio.

Rule #5: Never show video controls

I’ve seen time and time again people want to add or display video controls in a video header or background.

One important thing for you to remember is that it is just a video background. Don’t treat it the same way as a video player on a page.

If you add video controls it will go against the purpose of a video background and change it from being just a background to the main video item, except without sound and is played continuously in a loop.

If you want to insert an instructional or informational video to your web page, then don’t use it as your background. Just use a normal page layout, and add a video player to play that video.

When you are trying a new design trend (such as a video background), the key is to improve user engagement – not to decrease it. The 5 rules above helps you accomplish that.

Now that you know how to use video background the right way, let’s see how you can add video background to your website.

 

Where To Find Videos For Your Website

Your first challenge is to find the perfect video for your website.

Keep in mind rule #1 from above, and make sure the video you pick helps communicate your values and reinforces your brand.

Some of the best video backgrounds we’ve seen are custom made. With technology nowadays, you can film this yourself with a digital camera or even with your iPhone. Remember it doesn’t have to be perfect, this is especially true if you use a dark, light or color overlay on your video.

If you need some help with video editing, you can find plenty of affordable freelance professionals:

  • Upwork (previously oDesk & Elance)
  • Fiverr

If you don’t feel comfortable creating your own videos, you can use free or paid stock videos.

These stock videos are great in creating specific moods. The differences between free versus paid stock videos are the quality and selection. So, we do suggest that you check out both paid and free sources.

  1. VideoHive: We’ve used this on multiple occasions when we were looking for video backgrounds and we also found some good clips when creating business promotion videos. The videos are pretty affordable with most of them ranging from $5 to $35. They have a broad selection so you’ll have a decent chance of finding what you’re looking for there.
  2. Free Video Sources: Digital Video Magazine has a good post about the top 25 free video resources. This is also a good place to start searching.

 

How To Add A Video Background To Your Website

Everything so far has been relatively easy – what rules to follow to avoid common mistakes and where to find your video.

Now comes the harder part – how do you set up the video as the background of your page?

This can be as simple as a click of a button or it can be as difficult as re-writing the codes to your website.

How challenging it is to add a video background on your website depends on which website builder your are using!

If You Are Using WordPress

If you are using WordPress, you have two options to add a video background:

  1. Use a theme that supports video background; or
  2. Use a video background plugin.

If you decide to use a video background plugin, you’ll have to test it out first to see how well it works.  Also, make sure that it is fully compatible with your current WordPress theme so that it won’t cause any conflicts that may “break” your site.

Alternatively, check if your theme has a video background function that is already part of the design.  If it does, then it’s easy to activate it.

If your theme doesn’t have a built-in video background function, you might need to find a theme that has the function built-in.  The downside is that you’ll need to change your website design with a brand new theme.  So, weigh your options and see which one fit your need.

If You Are Using a Drag & Drop Website Builder

What if you are not using WordPress, but a drag & drop website builder like Wix, Squarespace, Weebly or an ecommerce builder such as Shopify?

If you are using Weebly, it is not all that simple to add a video background without knowing how to code.

Even though Weebly is known to be one of the easiest website builders to use, and gives you with the ability to add a video background with custom coding, they don’t have a native video background built in.

A workaround is to use an animated GIF image as your background image. You will not get the same image quality as a real video, but you will get a motion background.

So, which website builder allows you to easily add video backgrounds?

Wix, Squarespace and Shopify can!

#1 Wix Video Background

Using Wix is hands down the easiest way to add and manage a video background with zero coding skills. You can read our detailed review about them here.

Adding a video background is as easy as adding an image with Wix. Here is a video that shows you how this work:

(Click on the image to play video)

Wix Video Background Themes:

Here are a few Wix themes you can try for free to display a video background on your website.  It just takes a few clicks to upload your video – no technical coding required.

Further, Wix gives you certain video background editing functions, such as the ability to configure any overlay patterns or colors for your video background, or adjusting the video looping function.

They make it really easy for you to get your video background working in minutes.

video background website theme template wix
video background website theme template wix
video background website theme template wix
video background website theme template wix
video background website theme template wix
video background website theme template wix

(Click on any of the images above to see the actual themes with video background)

#2 Squarespace Video Background

First of all, Squarespace is one of the best design-oriented website builders in the market today.

So it’s not a surprise that they make adding a video background to your website simple and elegant.  You can read our detailed review about them here.

Squarespace Video Background

You can upload your video into YouTube or Vimeo, then insert the web address of the video into the Squarespace editor, and that’s about it.

Just note that not all of Squarespace templates support video backgrounds.  You’ll find a list of templates that support this feature here (along with tutorials on how to get the video background up and running).

Squarespace also allows you to edit the look and feel of the video background with editing tools such as stylized filters, overlay colors, and playback speeds. This gives you the ability to add a little bit of customization to your design.

#3 Shopify Video Background

Shopify allows you to add video background in similar ways as a WordPress website. So you can either do this by using a theme that supports video background or you can use a video background plugin found in Shopify’s app store.

When compared to Wix and Squarespace, it will take a bit more work to add a video background in Shopify.  But this is a better option for you if you are operating an ecommerce business (Shopify is one of the best ecommerce builders in the market today. You can see our review about them here).

Shopify Video Background

Click image to see Shopify themes

At this moment, video background themes are somewhat limited in Shopify’s Theme Store. You do get more selection if you search for Shopify Video Background Themes in third party providers like Themeforest.

Do keep in mind all themes available in Shopify’s Theme Store are screened, approved and supported by Shopify.

In comparison, Shopify Themes from third party providers do not undergo Shopify’s direct screening process. While I am not saying third party themes are not as good, I just want you to be informed if you are considering whether to purchase from a third party provider.

 

Conclusion – Takeaway

Using a video background can be a great design asset if you know how to use it properly. By following our 5 golden rules above, you will be ahead of the game!

Remember, different people react differently to various videos.  So consider testing a few videos to see which one works best for your website and visitors!

website-design-thumbnailWant more website design help?

Click here to access more of our free, step-by-steps design guides!

See Design Tutorial Library

Found This Guide Helpful?

Question – Did this guide benefit you? Leave a comment below. 

Do you know anyone who can benefit from this guide? Send them this page or click on the share buttons on the left.

You’ll be helping us out by spreading the word about our website, and you’ll be helping them out!

 

Connie Wong

About Connie Wong

Designing and creating your website (especially your first one) is not a simple task. If you're a designer like me, then you're already way ahead of the game. But what if you're one of the 99% of business owners who are not technical or creative? I want to share my website design expertise with you to help you build a professional looking website to grow your business.

Subscribe

Connie Wong

About Connie Wong

Designing and creating your website (especially your first one) is not a simple task. If you're a designer like me, then you're already way ahead of the game. But what if you're one of the 99% of business owners who are not technical or creative? I want to share my website design expertise with you to help you build a professional looking website to grow your business.

,

Leave a Reply

8 Responses to How to Use Video Background On Your Website – The Right Way!

  1. #

    Thanks so much for this info. Really enjoying your webpage.Hey,thank you for writing this cool article.Truly said,this will work like a magic wand for the non-technical person.

  2. #

    Thanks a lot, Jeremy, You really make my life much easier now as I have to add a 20-second video in my class project’s website. I have shared this article with my best fried too. But I have a question in my mind that do you think that online video marketing is the best practice as some people just make frustrated videos to just increase their views.
    Thanks once again.

    • Jeremy Wong
      #

      Hi Anna,

      Thanks for the feedback, making your life easier is why we’re here!

      I think the success of video marketing definitely comes down to the action plan that is put in place. If you have a solid idea of why you’re making and publishing videos, as well as what end goal you want to achieve then it can be very handy tool in your arsenal.

      But if you make videos for the sake of it, then you might struggle to see the results you hope for (and potentially frustrate users who don’t connect with the content you’re producing.)

      That’s just my take on things,

      Jeremy

  3. #

    Muchas Gracias, voy a realizar mi primera web con video background y justo encuentro todas mis dudas resueltas.

  4. #

    I just watched a webinar about optimizing your ecommerce site, and they stressed the need for a site that loads quickly. They said that the delay of even 2 seconds can mean the difference in bounce rates. How does video affect load time?

    • Jeremy Wong
      #

      Hi Mitzi,

      That’s a good point. There are some video background players that can stream videos from YouTube (or other popular video hosting sites such as Vimeo). Since YouTube will handle the bandwidth / streaming load, you don’t have much to worry about.

      But if the video is loaded from your website directly, then you have to be more strategic when picking what sort of video you want to embed to your page. If you embed a 30 minute, ultra high definition video, then it will take time to load. But if you pick a video that loops only 10 – 15 seconds, and you are pick a good video resolution (doesn’t have to be ultra high definition), then this will reduce your load time significantly in comparison with the first example.

      So it’s definitely a balance you have to try to achieve. Obviously, not loading a video gives you the fastest result (all other things being equal), but a video background design can have very positive impact on your visitors.

      Jeremy

  5. #

    Thank you! Thank you ! Thank you! Every question I have is answered. Terrific, practical advice in a straightforward manner.

    • Jeremy Wong
      #

      You’re very welcome, Kathy! Glad you found this guide helpful to you.

      Jeremy