How to Properly Display Videos on your Website


It wasn’t too long ago that adding a self-hosted video to a website was easy. Just encode the .flv, throw in some code, and voila – you’ve got a video on your website. Then came the iPhone, iPad, and other devices that do not support Flash content. Fortunately, with the proliferation of video sharing sites, good inexpensive encoding software, and a variety of free or inexpensive playback solutions, there are options. I recommend taking one of two approaches: (1) host your video on a video sharing site (likely YouTube), or (2) spend a little more time encoding and preparing a universally-supported, self-hosted video. As with anything, each has it’s benefits.

Option 1: Upload to YouTube
For most people, YouTube (or a similar video sharing site) is the way to go. It takes care of the encoding, hosting, tracking… all for free. It does, however, lack features that some people need, like being able to select the exact frame for the default still shot, removing the recommended videos that appear afterwards, or capturing additional statistical information. Still, for the majority of people, YouTube is the best option. After uploading it to YouTube, just grab the provided embed code, and copy/paste it to your website.

Option 2: Encode it yourself
Encoding a video for universal playback requires a little more work, but gives you absolute control over the quality, player skin, statistics, and more. On the down side it can be time consuming, and you are responsible for the cost of hosting it. The first step is to encode your original video to several formats. I recommend using an inexpensive piece of software called “EasyHTML5Video”. It works with most source video formats, and in one shot, encodes your video to three HTML5 video formats (learn more about HTML5 video here), plus flash. It also provides the html code that automatically selects the best file to play based on your viewer’s browser and operating system, falls back to Flash, and creates a default image.

At this point, you could be all finished, but if you want your player to have a consistent skin, offer your viewers more playback options, and fix other inconsistencies, you should use an existing video playback solution. There are plenty of these to choose from. Of course, you can also start from scratch and build your own.

Hopefully this is enough information to get you started. If you need help with your specific project, feel free to give us a call. Did I miss anything? Let us know in the comments.

Other Recent Content