Adding video provides your visitors with a much richer experience. Fortunately, adding video content to your HTML pages is much easier than ever.
However, each method of adding video has its own advantages and disadvantages. While there are many different methods that can be used to add videos to your pages, leveraging YouTube seems to be the easiest to implement.
Please note that some of the methods listed below are not supported in HTML 4.01. You either have to have a browser that supports HTML 5 or install require that Flash is installed on the user’s computer.
Here are the most common ways to add a video to your web pages.
iFrame Element
I find this to be the easiest way to add a video to your page. YouTube already provides you with a link to an embedded player, just click on the Share button to access the code.
All you need to do is add an iframe to your page and assign the correct URL to the src attribute of the iframe. This method requires a browser that supports HTML 5 or Flash. Here is an example.
<iframe width="560" height="315" src="http://www.youtube.com/embed/Bzohr7uqBS0" frameborder="0" allowfullscreen</iframe>Video Element
The <video> element is an HTML 5 element. Within the <video> element, you can add multiple <source> elements so that the browser can choose which file is best to download. Here is an example.
<video poster="movie.jpg" controls="controls">
<source src="movie.webm" type="video/webm"/>
<source src="movie.ogg" type="video/ogg"/>
<source src="movie.mp4" type="video/mp4"/>
Text content in the event that no video can be played.
</video>Embed & Object Elements
You can also use the <embed> and/or <object> elements to try to play multimedia elements in HTML pages. Here is an example of how to display a Flash video using both elements.
While the <object> element is supported in HTML 4, the <embed> element is not. If the browser does not support Flash, the video will not play. Using this method is not easy when supporting various types of browsers.
<embed src="demo.swf" height="250" width="250"/>
<object data="demo.swf" height="250" width="250"/>Use Multiple Solutions
Another method is to use various elements so that at least one method is likely to be supported by the user’s browser. Keep in mind that this option includes HTML 4 and HTML 5 elements.
For your page to validate correctly, you will need to use the HTML 5 DOCTYPE, <!DOCTYPE HTML>.
In this example, the browser will attempt to play the video using one of the elements in this order: video, object, then embed. Here is an example.
<video poster="movie.jpg" controls="controls">
<source src="movie.webm" type="video/webm; codecs="vp8.0, vorbis""/>
<source src="movie.ogg" type="video/ogg; codecs="theora, vorbis""/>
<source src="movie.mp4" type="video/mp4; codecs="avc1.4D401E, mp4a.40.2""/>
<object data="demo.swf" height="250" width="250">
<embed src="demo.swf" height="250" width="250">
Text content in the event that no video can be played.
</embed>
</object>
</video>Again, my suggestion is to implement a video solution that is easy to maintain while still providing meeting the needs of your users. I find that using iframes works best for most scenarios, especially if your multimedia is being hosted by YouTube.
