How About Some Video In Your Web Design?

You’ve most likely seen that full-screen video backgrounds are gaining popularity in modern web design. Web speeds are up, browser technology is advancing, and acquiring HD video has become much easier. Since this trend is on the rise, I’d like to review some aspects of background video in web design.

Many businesses are incorporating full-screen videos into their design but not every project can benefit from this server-intensive design technique. A proper setup paired with careful attention to detail is required for full-screen video backgrounds to have an effect on overall design layout and branding.

Keep it Simple

If your video is being used as a call to action then I suggest you keep it simple by creating more contrast between the text on top of the video. The video should be either darker with light text or light with dark text. This works the best for the message not to get lost in the movement. This will also help lower the file size of the video which will allow it to display quicker to the user.

Mute it!

Video media setup to auto-play has one problem: loud audio. This happens to me all the time and is completely annoying. I really don’t want to hear sound unless I ask for it. I would say if sound is necessary for your video effect then instead of an auto-play background video, I would issue the user a play button so they know sound will come with it.

When users notice a video player on your page it usually waits to be activated. The user can choose whether to play the video or leave it alone. Video backgrounds are set to auto-play, which is great, but there’s a reason why most of them are muted by default.

Save your users the bad taste and mute background videos. Your visitors will be happy you did.

Browser Issues

HTML5 has helped shorten the gap between video file-types but we’re far from a forever solution.

So how do we ensure compatibility with background videos? First we check browser support for native file-types. Can I Use provides an analysis of CSS & JavaScript properties, along with HTML5 elements. We use this to your advantage and remember to aim for a specific audience.

Analytics is especially useful here as we can track which browsers are commonly used and add up the level of support for each video type. Flash video is perhaps the most widely-supported choice if you need to handle legacy versions of Firefox and IE.

But generally speaking aim for the most widely-supported codecs and video containers. H.264/MP4 and VP9/WEBM seem to be the two most popular choices. If your video uses at least one of these file-types then your most likely going in the right direction.

Another very important thing to keep in mind is the size of the file. Your 1080p video might look great scaled on a larger iMac, but is it worth the pain of forcing a video that’s hundreds of MB onto a visitor using a 13″ laptop?

Unlike traditional JPEG backgrounds, videos have a more natural method of scaling. Even with a reduced file-size your video should still look pretty darn good. So for video background usability the two most important things are proper file-type and reduced file-size.

Keeping in mind these aspects for your video backgrounds will see your bounce rate decreased and the “WOW” factor increased.

Comments (1)

[…] previously posted about implementing video into your web design and we just can’t get enough of it. If your on a desktop computer you’ll see […]

Comments are closed.