Before showing you how to add videos to your Web site, let me explain a bit of the theory...

In the computer world, all types of files (be it videos, images, musics or even texts) have a their own formats; just like the variohs languages we have in the World. For videos, hundreds of formats for different use cases exist; and there are also many multimedia player softwares around there that can play some of these. In a Web page, the program that plays the video will be ... well, the Web site.

Unfortunately, the organization working on standards for the Web (W3C) only took interest in the video subject too late, as a reason meanwhile many techniques have emerged for including videos on Web pages. Let me present the two major techniques:

The first method is to use Adobe Flash. Flash is a small program that can run in your Web browser and can display multimedia content. It appeared in 1996, introduced support for videos in 2002 and when YouTube was launched in 2005 all of it was actually based on Flash technology (and right now it is still predominantly Flash-based).

The second method is the use of the <video> tag introduced in HTML 5. This method, becoming more and more popular since November 2010 due to the fact that Apple's iOS devices do not support Flash, has two major disadvantages: first, only some very recent browsers can understand it -for example Internet Explorer's version 10 only has support for it; so if you only use the <video> tag then you need to ignore around 25% of your visitors. Worse (second disadvantage), no one agreed on the codec (i.e., video format) to use in that tag, as a result if you need to have 100% coverage with this mehod you'll need to encode and store your video as Theroa, H.264 (mp4) and VP8.

Long story short: if you just need "the computer world" to see your videos, the use of Flash is enough. But, if you're targeting computers as well as the various mobile devices (mostly, Apple iOS devices) when you need to use Flash and HTML 5's <video> tag. Here come the steps:

1) Store the video in a versatile format: if you read what I wrote a few paragraphs ago carefully, this might sounds complex; it actually is not -the Flash platform does support H.264 (so, mp4) and most of the mobile platforms that don't have Flash (Apple iOS and others) also support H.264. In order to convert your video to mp4, by personal recommendation is Handbrake: handbrake.fr.

2) Arrange video metadata: by default, MPEG-4 videos' metadata, i.e. the information with regards to the length, title, ... of the video, is stored at its end. On the other hand, when you download a vide the beginning of the file gets downloaded first; as a result you need to move this metadata to the beginning of the MPEG-4 video so that playback can start "instantly". To do so, use MP4 Metadata Mover.

3) Use a Flash player that can read MPEG-4: this step is simple, just download it from the Strobe Media Playback Web site; and once downloaded read the documentation for it. The file we are interested in the package is called StrobeMediaPlayback.swf.

4) Put all these on your Web page properly with JavaScript: in short, you need to write a logic in JavaScript that uses Flash if it can, and if not uses the HTML 5 <video> tag. As a bonus, the code I'm sharing with you also automatically and dynamically resizes the video based on the browser window size (useful for mobiles): click here to download.

To use that video.js file, for example with a video called Fireworks with a resolution of 958 * 540 you simply need to add the below code:

<script type="text/javascript" src="video.js"></script>
<script>video("Fireworks.mp4", "Fireworks.png", 958, 540)</script>


If you do not want to deal with these steps, you can also ... use YouTube's "embed code" feature. For example:

<iframe width="420" height="345" src="http://www.youtube.com/embed/XGSy3_Czz8k" frameborder="0"></iframe>



Have fun!