Kids today have no idea, but anyone born before the 90s remembers a time when watching videos online was a feat of patience—videos were slow to load, prone to lag, and just a frustrating experience. For the most part, websites consciously avoided embedding videos to prevent all of this and at the time it worked. Why use video when plain old text and images could do the job anyway?
Fast forward to today’s world of web and videos are everywhere! And for a simple reason: they are one of the most powerful ways to communicate a message since we process visual information much more effectively than words. In an era where attention spans don’t allow for much time to make an impression, videos are also a great way to engage and interest our audiences. If a picture is worth a thousand words, then surely a video is worth a whole lot more.
Now, not all videos are created equal or have the same end goal. They play different roles and the reasons for their use vary greatly. Below we’ll look at some of these roles and how to fulfill them effectively using some great examples.
The Role of Videos in Websites
1. Introduce
Videos are effective front liners as they greet a website’s visitors. They could help introduce a new product or service and its advantages and benefits for the user, or introduce website visitors to your process, or team, or anything you’d like to introduce to them really.
One of our latests projects—Mains Lib—is a helmet storage solution startup. With such an innovative idea, adding a video on their landing page to introduce their concept and show how it would work in real life was a must.
Mains Lib Introductory Video
2. Explain
Done right, videos can explain lots of things about a brand or a product—from its history to how it works—in anticipation of possible questions from users. One of the best examples I can think of an explainer video is Apple’s Mac Pro page. As soon as you arrive on it, you are greeted by a beautiful sequence of videos explaining every last detail of the new components that make this new Mac so brilliant.
Apple’s Mac Pro Product Page
3. Entertain
Naturally, videos have an entertainment value which can entice users to stay longer, thereby improving your website’s bounce rate.
Unless you’ve been living under a rock since 2005, you’ve probably spent at least some of your time on the king of video websites: Youtube. Entertaining goes beyond funny cat videos for this giant. From its humble beginnings as a video sharing platform whose whole aim was to entertain, it has grown to become an entertaining business cash-cow, with the worlds biggest brands having their own channels to showcase ads, new products and entertain an audience which they hope to turn into customers. Videos in the web are the reason viral campaigns exist, and what are viral campaigns if not entertaining?!
Youtube Old Spice Commercial
4. Energize
A snazzy video certainly revs up a website. Videos highlight a brand’s passion. They send the strong statement that the company is dynamic and full of energy. No wonder fashion brands, luxury cars, and creative agencies prefer videos on their websites—to showcase their style, dynamism, and personality.
AVD‘s landing page makes great use of a video background to energize it’s website and express their personality while showcasing their services at the same time.
AVD Landing Page Background Video
How to Use Video in Web Design
Hosted on your website or embedded from Youtube/Youku? Video player or full screen background? Autoplay or no autoplay? There are a lot of questions surrounding what the “best option” is when it comes to video in web design. Let us try to explain the whens, whys and hows of video usage.
Self-hosted or not?
First things first, self hosting videos means that you upload your video onto your website’s back-office, just like you would do with an image, while embedding videos involves uploading your video to 3rd party video hosting service (think Youtube, Youku, Tudou), which then provides a code you can embed on your pages to stream your video within your website.
Now answering this question is quite straight-forward. If you can help it, don’t ever host your videos on your own website. Why? Plenty of reasons:
- Hosting limitations: most hosting service provides set limits to the amount of storage space you get and the size of uploaded filed. With videos nowadays easily reaching 100MB if HD, you could be in trouble really soon if you choose to self-host.
- Loading speed issues: if you are hosting your videos in a server with limited bandwidth, your visitors will most likely have issues with slow loading and playback issues, particularly if their internet connection isn’t the fastest out there.
- Format issues: unfortunately we haven’t reached the day where all browsers will be able to do the same things without having to worry about compatibility. Being that there are several video formats you can upload (MP4, WebM and Ogg), with only Chrome able to support all of those formats, you will have a lot of converting to do to ensure all visitors can watch your video. Now, this is only browser compatibility. You also need to keep in mind that people will access your videos from different devices, which have different size screens and different resolutions. How does that sound for fun?
- Sharing missed opportunities: by hosting your video on your website, you put a limit on the number of people who will come across it unless your company is Coca-Cola famous and your videos are SuperBowl level genius. By hosting them on popular video websites you give your video (and your website) the chance to be found by hundreds of thousands of people, make it easy for them to share the videos and have the possibility to go viral if it’s good enough. Who would want to pass on all that publicity?
Of there are also pros when it comes to self-hosted videos, otherwise we wouldn’t even be talking about it. Self-hosting means direct traffic and no competitors to steal views from you like it could be the case in 3rd party websites. Moreover, SEO-wise, hosting videos on your site means back-link value as more people will be sharing directly from your site. However, hosting your video on a 3rd party website doesn’t prevent people from sharing your website as they can watch the video without leaving the page as well. For this reason, we still believe embedding your videos is the right way to go—unless you are a video sharing website of course.
Video player or full-screen background?
The answer to this question comes down to purpose. What is the end goal of your video?
If you are looking to energize or give a glimpse into your company, using a full screen background is a great way to do it. It gives your website an extra something that doesn’t take away from the content but increases you visitor engagement. Using video backgrounds is also a great way to get rid of sliders and convey the same information in a much faster, effective way.
Glimpse, one of our recent projects, uses a video background in a really smart a way to support and animate their company mission “We know how to go deeper”.
Glimpse Homepage Background Video
On the other hand, if the goal of your video is to entertain or explain, using a video player where the video can be the main focus, is the better option. It’ll be more engaging, it will get your message across in a clearer way and, if you’ve enabled social media sharing on it, it will be the perfect way to spread your message to a wider audience.
Autoplay or no autoplay?
If you do a quick online search on autoplay, most of the results you get will be something along the lines of “how to disable autoplay” and “how to stop autoplay video” so the answer to this question should most definitely be no autoplay. There’s nothing worst than being somewhere public or quiet, visiting a website and magically their homepage video starts autoplaying with the volume in full blast. Bad UX much? Autoplay is well and good when someone is on a website like Youtube with the sole purpose of watching videos. If you website isn’t a video playing website, then autoplay does more harm than good. Not only is sound an issue, but if someone is visiting a particular page for the content and not the video, loading a video they don’t want to watch slows down the page loading time for no reason.
The Technical Bits
Responsive design
Whether self-hosting videos using HTML5 <video> tag or embedding videos from 3rd party websites using <iframe>, making sure the video fits the screen it is being viewed on is essential. If you are hosting in Youku or Youtube and the like, you don’t need to worry about any of this as they are fully optimized to handle and display videos in all sorts of devices. If you, for whatever reason, decided to self-host using HTML5, there’s a little trick by CSS Tricks that allows you to easily make your video responsive.
Part 1: Make the video adapt to the width of the container.
<video <strong>width="100%"</strong> ...
Part 2: Adjust the height of the video on CSS
video {
width: 100% !important;
height: auto !important;
}Voila! Your video is now responsive!
Interactive Videos
You’ve seen them before. Whether as little pop windows on Youtube videos or as interactive ads where you can click and buy or see more details about what you are watching, interactive videos are spreading fast. How does it happen? Through Flash and HTML5 magic. The example below is one of AVD’s campaigns for Chips Ahoy promotion. As you can see, there are 2 points of interactivity; one which is the main interaction is the cookie in front of the cars which you can click to see extra material and funny videos, and the second is the social share bar that will hopefully allow the videos to go viral through popular shares.
AVD Chips Ahoy Interactive Video Campaign
Unfortunately making videos interactive isn’t the easiest of things so we’d always recommend hiring an experienced marketing agency to make sure you are getting the most out of your visitors interactions.
There you have our tips and tricks for using videos in web design. Hope you enjoyed it! If there’s anything you think we missing or have any questions, please feel free to add your comment below!
Thanks for reading!