The Principles of Embedding Online Video

Tweet

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Nathaniel

    Great timing.. I was just writing about some video hosting options. Obviously YouTube is a default starting choice, but then it leads to questions about advertising: isn’t there a risk of unwanted/unsuitable/competing ads appearing during playback?

    What options for managing/mitigating that do you suggest? I don’t doubt most users are somewhat immune to ads, but they’re always something to remember.

    • http://www.shortymedia.co.uk/ Joshua Hardwick

      Hi Nathaniel,

      Good point about advertising, there is a small chance that YouTube hosted videos can advertise competitors products/services which obviously, is never a good thing. It can also be annoying to the end user too.

      I think if you are concerned about ads, it might be best to go for a different option than YouTube. For example, Vimeo has some great solutions that are pretty low-cost, have no ads at all and even allow you to brand your own video player. It’s definitely the best solution if you’re serious about using a third-party video host.

      I hope that helps.

      Josh

  • Pino

    What about Vimeo?

    • http://www.shortymedia.co.uk/ Joshua Hardwick

      Hi Pino,

      I mentioned Vimeo briefly in the comment below; Vimeo is an excellent video host and their premium accounts are great value too. Vimeo definitely takes a lot of the hassle out of video hosting, much like YouTube, but you might argue that Vimeo is slightly better as there are no ads and you can also have a branded player. It depends on your needs I guess.

      Josh

  • http://kitsmedia.ca John Owen

    Amazon Web Server Cloudburst streaming and JW html5/flash player ?

    • http://www.shortymedia.co.uk Joshua Hardwick

      Hi John,

      There’s literally tonnes of great options but personally, I haven’t used that one. I tend to use Vimeo Plus or Pro if I need something a bit more professional. Having said that, if you’re using a HTML5 and Flash player and have you video in the right format for the browsers, there won’t be a problem.

      Josh

  • http://www.quasars.com Ray Pittman

    I personally steer my business customers to Vimeo and I recommend either the Plus plan or the Pro. I think it has many more options than YouTube and it doesn’t have the back-of-your-mind thought process of dancing cats and singing dogs. I think it provides a more professional atmosphere for a business. My personal opinion…

    • Tony Hayes

      I am less of a fan of Vimeo having watched how slowly they have responded to Explorer issues on Windows 8, namely that Vimeo video’s don’t play in many cases. They have been aware of these issues for at least 3 months and still no fix http://vimeo.com/forums/help/topic:92711

      There are a number of other issues with Vimeo video, including the dreaded “Ooops something broke”, that don’t occur with YouTube video so the problem can’t be completely on the Microsoft side. I still like Vimeo but not supporting the latest version of Windows appears to be pushing a number of their users to YouTube.

    • http://www.shortymedia.co.uk Joshua Hardwick

      Hi Ray,

      My thoughts exactly. I love Vimeo and I think their Pro and Plus accounts are brilliant too. But hey…what’s wrong with dancing cats and singing dogs!?

      Josh

  • http://www.esdat.net/ Trevor Escis

    I know some companies block youtube so employees don’t spend all day watching videos! This can be a problem if clients are employees so a marketing video, for example, is blocked by their employer. Does anyone know if companies are also likely to block vimeo? I found statistics for youtube online but not for other vimeo.

  • http://veebid.eu Axis Multimedia

    Using HTML5 videoplayer seems great, but as long as there is a need for having more than one video file because of codec support issues makes me prefer flash video.

  • http://www.linearthoughts.co.uk Kev Scott

    Where do things currently stand with HTML5 players on mobiles? The YouTube experiment you link to suggests Safari is supported but do you have a feel how well it is working in practice?