Rich internet applications, part 1: embedding YouTube™ video player into web page

Embedded video/audio players, like the popular YouTube™, represent the cornerstone component of modern rich internet applications (RIA), extending the web page interactivity, responsiveness, aesthetic appeal and overall user experience. Embedded players could serve as an efficient educational tool, providing various instructional materials, lab works in rather inspirational and intuitive manner. The article demonstrates several techniques of embedding popular YouTube™ video player in a web page.

YouTube™ video player is built on Adobe Flash™ technology, which currently has tremendous installation base worldwide. It is relevant to mention that several relatively new technologies are actively penetrating the market of rich internet applications, most notably: HTML 5.0 and Microsoft Silverlight™ (covered in a separate article).

Flash™ based embedded video player is capable of streaming (playing back) the audio/video content from popular www.youtube.com website. There is no need for subscription/logon in order to utilize this feature. The link to the content of interest is encoded into query string, which looks like a random set of characters (for example: x_4CNvG1Q_M), added to the full address string of YouTube™ web site. Correspondingly, the completed address line should look like: http://www.youtube.com/watch?v=x_4CNvG1Q_M (note: the link is presumably pointing to the content titled: “Anastasia Volochkova dancing to Adiemus by Karl Jenkins).

The easiest way to embed the YouTube™ video player is to go to www.youtube.com website, select the item of interest, then copy/paste the corresponding code snippet, located in the text box marked “embed”, into your own web page, and, voila! When the user opens the web page with embedded code snippet, he/she will be able to view/listen to the selected content and operate the player through the set of on-screen controls, consistent with original YouTube™ video player.

There are several customization options regarding video player color palette selection and the size: this includes standard settings specified as: 340x285, 445x364, 500x405, 660x525. For those who are familiar with basic ASP.NET web programming, there is much wider set of customization features, which could be implemented through the custom application program interface (API), developed by Dr. Alexander Bell and placed in the free public domain at CodePlex. These extended options include the custom size (w/h), autoplay and start-up options, color palette and border selection, etc. See the functional demo of embedded YouTube™ video player.

Copyright© 2010 Alexander Bell

Resources

1. Embedded YouTube™ video player: tutorial and downloads
2. Embedded YouTube™ video player with custom playlist (demo)
3. Rich internet applications: Silverlight™, YouTube™ (tutorial and downloads)
4. Microsoft Silverlight™ media player (demo)
5. Motosport map with embedded YouTube™ video player