DEV Community

Cover image for The Video Background Stimulate
Nik Moraitis
Nik Moraitis

Posted on

The Video Background Stimulate

In more than a few years, the video background has become the trend in Web design and for what I have seen so far, it tends to stay for more than a while around us.

Personally, I like to see a short movie play on the background when I first visit a homepage of a brand that tells the story within a short clip. Accompanied by a title and a short text that hits the nail right on the head.

How to present a Video Background?

Well, to present your content right it has to be as clear and visible as possible. For example, having a background video overlay with bright colours, with a similar contrast texts don’t make any favours to your design and to your website as a whole.

A trick you need to apply on your design, is to have a layer in between your video and your text. That curtain could possibly be a background colour that gives the desired contrast for the text to stick out from the background. To give an example here, a black coloured background with an opacity less than 50% in between your video and your writing content, could be creating a great contrast for your design. And that can be our filter to apply better contrast between our elements.

In my case, I had to create a video background overlay for a fashion company. The video was advertising a woman’s fashion and it is telling its short story as it should.

Now, the original video was too bright for my wanted design. If I had to use the original video as my background with my Call of Action elements (texts and button), it wouldn’t do any favours to me or to my design. Having a high brightness on my video was distracting the user’s attention, and as a result the user could not focus on the Call of Action area where I want them to focus on (as the texts were lacking of contrast and they were making it invisible for the viewers).

Solution: What I did in this example was to pin down my video by adding a black colour filter in front of it. Make sure that the opacity of the filter stays low (=<50% opacity). In this way, the Call of Action section, including titles, texts and buttons, is given a nice contrast to set the needed focus for the viewer.

So, Contrast is essential to succeed with your Call of Action campaign!

In the end, that’s what you want to achieve with your design. Less distractions and a main focus on your Call of Action campaign, even though you do want to tell your story with a short video on the background.

How big should a video be?

Your video background should be as short as it can be. Long videos produce long buffering. And a long load screens affect your traffic that eventually would put your visitors off your website.

You should be advised to limit the length of your video to 30-40 seconds long, or in the best-case scenario, you should find a short video (approx. 30 secs) that loops seamlessly. So that you give the impression that your video seems endless. Try to find or make a video that can be less than 1MB or 2MB in size.

However, if you are a business make sure you show your story within that time gap. You don’t want to tell them everything, showing every corner, every person, every aspect of your business.
You just want to stimulate their interest to buy upon your campaign or converting them from visitors to customers, to followers.

Benefits of a Video Background Stimulate

Today more and more companies use the Video Background Stimulate, some of them are Nike Air Jordan and Wayne McGregor dance studio . The videos are looking mesmerizing that complement every content of the website and adding a WOW factor on the eyes of the viewer.

notice: the homepages mentioned here may vary in time and they may change in the future, so don’t be disheartened if you can’t find the examples I am giving you here.

Speaking about mesmerising visuals, in a related article of Inc. provides with evidence that:
• Unbounce reports that including video on a landing page can increase conversion by 80%.
• YouTube reports mobile video consumption rises 100% every year.
• 90% of user say that seeing a video about a product is helpful in the decision process.
• And, 50% of executives look for more information after seeing a product/service in a video, according to Forbes.

It’s some of their reviews. For more information read the paper here.

You may say: “Video backgrounds can make pages load slower and distract visitors from your Call to Action..” but that is not entirely true. If you follow the above approach you can bring more focus on your Call to Action campaign, by pinning down your video background with a filter of your choice.

I believe that your video background case can make visitors stay longer on your page, just enough to watch what opens in front of their eyes. Curiosity is the main stimulate. You can also intrigue your visitors to talk over the social media about your page, which is quite beneficial for your website traffic.

Resources of Video Background Stimulates

There is a number of free and paid online services that provide with videos for your coming projects. The best way, if you are a company of your own, is to have your own video. Promoting your company, your visions, your ethos, your products, your team, your services is something that has your own brand signature and appears unique.

In case you don’t have that luxury of composing your own -short story- video. You can have a look around and see what suits you better for your own campaign or your own promotional landing page. However, beware of what you are choosing. Have a look around and see what your competitors are using and avoid displaying the same media. After all, you still want to keep your uniqueness and make that video look as your own.

Below I give you some of the resources I choose for my own projects too:
Pexels
Enveto Market
Adobe Stock
Videezy
Pixabay
• and, Life of Vids.

Top comments (0)