UX tips on using background videos

using background videos

If you have visited any websites with a background video playing on the homepage, you’ll agree that this web design element is quite engaging, promotes interest and makes visitors stay on the platform longer — or at least long enough to watch the whole thing. This modern web design trend is a powerful tool to gain conversions and increase traffic.

Today, the InternetDevels Drupal web design company explores how and when to use background videos. 

Should I use a background video on my website?

The usage of video instead of a static background brings your platform to life. However, you should understand that video backgrounds are not suitable for every website. If you simply want to be trendy, you’ll achieve nothing but customers dissatisfaction. Make the website background a reflection of your business identity.

Key UX tips for using a video background

When implementing a background video, you should take care of user experience (UX) to ensure website success. Here are the key points of using a video background while ensuring a positive user experience.

  • Choose an appropriate video format

MP4, OGG and WebM are appropriate formats to use on the web.

  • Add video poster

It might happen that your video fails to load. In this case, you will need a video poster, which is displayed when your video is loading or if it doesn’t load at all. By adding a poster, you’ll be sure that there will be no blank space when something goes wrong with a background video.

  • Don’t be excessive with video length

Do not make the video too long. Remember that video background is a web design element used to grab users’ attention, not to inform. What’s more, visitors will not stare at your video for two or more minutes, as their initial intent was to find the necessary information on some topic, products or services.

  • Compress your video

The smaller the size of the video is, the better. Compress your video as much as you can but don’t forget about its quality. This should be done in order to ensure a flawless display with no distractions. If your video stops every now and then and takes a few seconds to proceed, visitors will get frustrated and bounce your site. Think about users who use a mobile hotspot to access your platform. Their page loading speed is much slower, so optimize your video background to make it load properly on mobile devices as well.

  • Add video transparent overlay

The usage of transparent overlay creates more contrast and highlights the website content. This technique can also be used if you are not satisfied with the video quality.

Yes and No for using video on background

We can all agree that the usage of background video is quite beneficial for your website. However, if done poorly, it can ruin your success. Here are a few ‘Yeses’ and ‘Nos’ of background video.

Yes: create a strong contrast between background and foreground.

No: don’t put too much text over the video.

Yes: compress your video.

No: don’t upload large videos.

Yes: add a relevant and content supporting video.

No: don’t distract the user’s attention from the main page content.

Yes: make it silent.

No: don’t add loud, frustrating sound to your background.

Yes: pay attention to mobile-friendliness.

No: don’t orient your website performance on desktop users only.

Add background video on your website today!

Now, when you can weigh all the pros and cons of video background on your website, you have to decide for yourself if this web design tool can benefit your business. If you opted for implementing video background, it’s time to choose a reliable web development agency which you can entrust with this complex task.

The team at InternetDevels has years of experience in successful UX web design project delivery. Do not hesitate to contact us if you have any questions regarding background videos specifically, or web design in general, as well as if you need our services to add a background video on your website.

2 votes, Rating: 5

Read also


Properly used animation can enrich functionality and increase engagements on your website. Discover how to use animation in UX and boost your platform today.


UI and UX can help you grow your online business or, on the contrary, disrupt it. Discover what are the most common web design mistakes and try to avoid them.


Many things change over the course of time, so it's a good idea to redesign your website every 12 to 15 months to implement new functionality, updates, and visuals. Here, our web designers...


Do startup websites need UI/UX design? Wouldn’t it be a waste of time and money to work on UI/UX design before you know whether your product and services fail or succeed? Top specialists at...


What is the first thing that grabs your attention when you visit an E-commerce website? No doubt it is the website’s design and appearance. Which E-commerce themes are the best? Don’t worry....

Subscribe to our blog updates