I’ve written previously about 11 common online video mistakes and then six steps to developing an effective video strategy. It’s time now to look at some of the mechanics of displaying videos on websites and how they might affect the choices you make.
Before we start, I’ll warn you: if you thought having to deal with Internet Explorer was your worst coding nightmare, think again.
Any web developer who wants to (or has to) ride what is an increasingly popular wave of interest in online video has to figure out the best way to embed this type of content to ensure that it’s playable on as many devices and browsers as possible.
Clients can be demanding when it comes to video, too, and they might not understand just how difficult coding a self-hosted video into a webpage really is.
Here are some principles to keep in mind when you’re considering whether and how to embed videos in your web development projects. We’ll start with the simple way to do it.
The Simple Way to Embed Videos
In my personal opinion, the absolute easiest way (and best way) to embed videos on your clients’ websites is to host them with YouTube. I’m sure this won’t come as any surprise, as most people use YouTube for their video hosting/embedding needs these days but there really is a good reason for this: it’s easy. YouTube does all the work for you.
Here’s a few reasons why embedding YouTube videos is your best option:
It Works on All Browsers and Devices
When hosting video content yourself and/or using a self-hosted video player, the biggest hassle is ensuring that the video works on all devices. YouTube takes away this problem as they’ve done all the hard work for you. Their videos play on PCs, tablets and Smartphones (including the iPhone and iPad) and basically all browsers. All you need to do is copy and paste an embed code. Simple.
There’s No Cost
Hosting video yourself can be expensive (well, expensive for your client) as you’re going to have to make sure you’ve got a fast server and adequate bandwidth to support a good user experience. The time saved by using YouTube (rather than self-hosting) will also decrease development costs for the client.
People Trust YouTube
Effectively, 99% of people who use the web will have come across YouTube videos, either on its own site or embedded on a site like yours. Because of this repeated exposure, people trust it. Strangely, I think using YouTube’s branded player actually increases the visitors’ trust in your/your client’s website.
What If I Can’t Use YouTube?
Obviously, YouTube does have a few drawbacks (e.g. limited rich snippets abilities, forced YouTube branding etc) and in some cases, clients are going to request that you do self-host the video and video player.
If this is the case, here’s a few guidelines to help you through the development process.
1 – Don’t Use a Flash Video Player (if you can help it)
A few years ago, Flash was massive; people were creating Flash games, uploading Flash videos and even creating entire websites in Flash (much to the dismay of SEOs around the world).
These days, it’s a completely different story, almost entirely thanks to Apple.
For whatever reason, Apple hates Flash and therefore, they don’t allow Flash content to be viewed at all on their iPhone, iPod Touch or iPad devices. They also don’t pre-install Flash on many of their Mac computers either.
With these Apple devices making up a huge chunk of the mobile market, you need to keep this fact in mind when it comes to coding your websites. As a web developer in the modern world, you need to be optimixing for mobile devices (unless your client has specified – for whatever reason – that this isn’t a requirement) and therefore, you really shouldn’t be bothering with Flash video players at all.
It’s not just Apple devices, though. Microsoft is also limiting the functionality of Flash on their latest Windows 8 operating system within the don’t-call-it-Metro interface. Although Windows 8 currently doesn’t make up much of the market, it will do soon as new PCs will soon come preinstalled with Windows 8 as standard. So, it makes sense to prepare for it now.
The bottom line is that Flash just isn’t the way to go anymore, at least not for videos. Flash is slowly being replaced by newer technology (e.g. HTML5) so it makes sense to primarily opt for this style of video player instead.
What’s more, there’s been countless times when I’ve personally viewed content through generic self-hosted Flash players on a PC and found the performance to be poor. This is not something you want your clients (or more importantly, your clients’ website visitors) to have to deal with.
2 – Do Use a HTML5 Video Player
At this stage, you might be wondering what you should be using if you shouldn’t use Flash and, basically, the answer is a HTML5 video player.
To cut a long story short, HTML5 is the future of the web. Many of you will already be coding in HTML5 and many sites are now using HTML5 to play web videos. Even YouTube is currently experimenting with (and perfecting) a HTML5 video player.
One thing to note is that there are limitations with HTML5 players; notably that some versions of Firefox and Opera require the video to be in the WebM format in order to play it through a HTML5 player. Firefox and Opera between have quite a large market share (approximately 23% in January) when it comes to PC users so it’s important to ensure that your video plays correctly in these browser.
One thing you can do is to use a HTML5 player as a Flash fallback (i.e. it will be used if Flash isn’t supported). This way, you can ensure that your videos play on virtually all devices and browsers.
3 – Use WebM or H.264 Codec
Another thing that you really need to think about when hosting video yourself is the file format of your video. When you upload a video to YouTube or another video sharing site, you generally don’t have to worry about this as YouTube does all the work for you (i.e. converts it to the optimum format etc) but when hosting it yourself and using a self-hosted video player, it needs to take priority.
The main reason you need to get the format of your video right is because some video formats can comprise much larger files than others. Although internet speeds around the world are getting faster, they are still pretty poor in some areas, including some parts of the US and the UK. For example, I’m in the UK living just 10 miles away from a major city and my average speed is 2mbps. At this speed, it would take me approximately 4 minutes to fully stream a 48mb video file meaning that if video files are too large (i.e. in a low compression format), it’s going to hinder my user experience.
H.264 and WebM are great formats as they generally retain high video quality even when highly compressed. H.264 is currently the standard web video format but, as I mentioned previously, there are issues with this format and certain browsers when used with a HTML5 video player so in some instances, WebM may need to be used.
At the moment, H.264 and WebM are going through a similar process to HD-DVD and Blu-Ray a few years back. Microsoft, Apple, Google, Mozilla and many other companies have all taken a particular “side” and therefore are making it quite difficult for web developers. You can read more about which companies are supporting which formats with regard to HTML5 video here.
Conclusion
Developing a website with video content is certainly no easy task and although the points raised in this post need to be taken on board, it’s important to remember that ultimately, your clients’ goals and priorities should drive your decision.
If you’re designing and developing a landing page for a large, well-known client and need to embed a sales video, it might be important that the video features their branding. They might also have the budget to host the video themselves and pay for the added development costs without any problems. In this case, self-hosting is the way to go.
However, if you’re developing a website for a relatively small business, YouTube offers an inexpensive video hosting solution that is going to keep costs down for your client and make your life easier as a developer.
Joshua HardwickI'm Joshua Hardwick, founder at The SEO Project. I spend most of my time building links and "doing SEO", but I also love a good red wine (or cup of tea).
