ProtoTube is the Javascript porting of a PHP class, Youtubeclass of Nemanja Avramovic and can be used to embed YouTube videos and the respective thumbnails in pages of any web site. It requires Prototype (1.6.1_rc2), Scriptaculous Effects (1.8.2) and SWFObject (2.1).

The class can generate HTML to embed a player to show the video in other Web site pages (example 1). The class may also generate HTML to display thumbnail preview of the videos and display video in a overlay viewer (example 2).

ProtoTube is unobtrusive: when javascript is turned off, the page still delivers its core functionality and is just displayed the link to the Video page on the YouTube site. Would seem to be compatible with IE6, IE7, IE8, Firefox 3.09, Safari 3.2.2, Opera 9.61.

I have to thank Particletree for the inspiration code of lightbox.

How to use

<link href="css/protube.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/prototube.js"></script>
<a id="myTest" href="http://www.youtube.com/watch?v=RQoUKZJrHSo">My Test</a>
new ProtoTube("MyTest", {options})

ProtoTube takes the URL of a video page in the YOUTUBE site and parses it to extract the video identifier. Allowed URL:

Example 1 - Image preview and display video as lightbox (default)

// HTML
<div id="example1">
    <div><a href="http://www.youtube.com/watch?v=RQoUKZJrHSoquot;>Depeche Mode - Personal Jesus</a></div>
    <div><a href="http://www.youtube.com/watch?v=Z6mlw54ocmY&feature=related">Depeche Mode - Enjoy The Silence</a></div>
    <div><a href="buijd3EnQTg">Depeche Mode - It's No Good</a></div>
</div>

// JAVASCRIPT
$$("div#example1 a").each( function(el) {
    new ProtoTube(el);
});
 

Example 2 - Embed Video directly in the HTML document

// HTML
<a id="example2" href="http://www.youtube.com/watch?v=L2GaCnAiuvo">Depeche Mode - Wrong</a>

// JAVASCRIPT
new ProtoTube('example2', { overlay:false, playerWidth:480, playerHeight:385, hd:1, showinfo:0 });
Depeche Mode - Wrong

Configuration Options

Overlay and image preview options:

Player options

Download

Prototube is currently in beta and is licensed under the MIT license.

Download Prototube (29/4/2009 - the package contains an working example and Prototype, Scriptaculous and SWFObject libraries) or grab just the source code.

You can post your comments, suggestions or bug reports on my blog.