How to use videos on your website
Why you should embed videos from third-party platforms and what makes a good video banner.
Why you should embed videos from third-party platforms
Videos are large files that use up a lot of hosting server resources. I recommend using a video platform like YouTube or Vimeo to serve your videos on the website (especially if your site is on a shared hosting plan). This allows you to use their fast, world-class servers to lighten the bandwidth on your hosting server.
You’ll also be taking advantage of their video file optimisation (which they carry out automatically).
YouTube is also a powerful ally for SEO, which is another benefit of adding your videos to the platform.
You can use Vimeo videos in HTML5 embeds, which are suitable for those full-width, looped videos that are popular on websites, which I refer to as “video banners”.
See how to use a Vimeo video in an HTML5 embed in this CodePen: https://codepen.io/lorindah/pen/KKbNKwp
What makes a good video banner
Video banners are full-width, looped videos that autoplay. Moving content can be a severe distraction for some people (particularly those with attention deficit disorders), so include a pause button on the video banner.
Things to remember when creating a video to use in a banner on a web page:
Browsers like Chrome won’t let the video autoplay if it has any sound (plus, people don’t like unexpected audio). You can use the “mute” parameter in the HTML tag, but it’s best to remove the audio track as this will reduce the video file size.
The video will be cropped as the banner size changes depending on the screen size. A suitable video keeps the focal point in the centre and doesn’t include elements that would make no sense if they were cropped.
Don’t include text in the video—text may be added over the top or next to it using HTML. Remember that video banners are suitable for decorative videos, not informative ones (for informative videos, use a regular iframe embed).
Don’t make the video too fast or include flashing—this will distract the website visitor from what you’re communicating using the other website content.