A common question we get asked when building websites is can we use video? Of course the answer is yes but there’s some thing you need to know before we explore that option.
Adding video to your website can give a high impact impression to your visitors but keep in mind that different devices and different connection speeds to your website can give a very different experience to different people.
It’s common practice to embed your videos from a third party service like YouTube or Vimeo and while this makes it easy to display videos on your website is it really the best option? What happens when your video has finished playing? Typically the viewer is presented with more videos they can watch. You’ve worked hard to get them to your website so do you really want them to be distracted by the next funny cat video?
Self hosting your video removes this issue and keeps your visitor more focused on your website. Although self hosting used to be discouraged due to hosting and bandwidth limits, those days are far behind us now. Even if you don’t have a high bandwidth web host there are content delivery networks that can take the place of third party video services.
Where can you use video on your website?
There’s two ways videos are usually used on a website: as a background say in the page heaeder or as an on demand video to give the user more information.
When used as a background you can get away with not so high quality to trade off for a faster load time. You’ll also want to keep the size down again to be able to present the video quickly.
On demand video should be of higher quality and because it is loaded and streamed at the users request there is a more acceptable wait time.
What format should video be in?
For streamed video that’s played on demand then the best quaility you can offer is probably the best choice.
background videos have a lot more requirements though.
If the video is to be full screen then 1920×1080 is best for quality but it will limit the length of your video for fast loading times.
A better trade of would be to use a resolution of 1280×720. This can look a bit grainy on large screens though. If you plan to have overlayed text/content then this will be the focus so it’s not likely that the lack of quality will be noticed. Another option is to use a semi-transparent colour overlay as this is a great way to hide the pixelation of lower quaility video.
Nobody likes websites that play audio or music without being asked to first so remoive the audio from the video. It’ll reduce the size too.
Top five tips to using video as a background on your website.
- Have a background image as a fallback to show instead in case your video doesn’t load.
Mobile devices won’t auto-play large videos. - Keep your video size small as you want it to start playing as soon as possible.
- If you’re not placing content on top of the video consider using an overlay to hide the low resolution details of your video.
- Don’t use audio. It’s not needed and can be annoying. It’ll also help reduce your video size
- Make sure your video is available as both mp4 and webm so that it works on different devices/browers.