Everything You Ever Needed To Know About Video Embedding

Video has become ubiquitous on the web, as easy to include as copying and pasting a few lines of text from the video service onto your web page. It's so easy, even a caveman can do it! But if you want to present more than one video per page you'll need to roll up your sleeves, do a little work, and manage the extra videos to make them more presentable and easier to navigate. This reference should make that job a lot easier!

This reference will show you how to manage multiple videos on your web page, how to cancel downloads, create video lists, pop-up video windows, DHTML video windows, and include RSS video feeds directly in your web page. There's even a -- very unique -- autostart reference for the various video services.

The Basics. How-to Embed a single video.

Putting a single video on your web-page is as simple as visiting the page that has the video you want and looking for that provider's embed box. This is a little text area that contains all the HTML code you need to put a video on your site.

For example, here is a Photoshop picture being created on youTube. To the immediate right of the video is a box and inside that box is a line that reads embed. If you click on the code to the right of the embed label, the code will be highlighted and you can either hit cntrl-C, right-click and select copy, or click on the browser's edit menu and select copy.

Now all you have to do is edit up your web page and paste the code where you'd like the video to appear. You can do this either by hitting cntrl-v, right-clicking and selecting paste or using the html-editor's edit menu and selecting paste.

If everything went ok you should see something like this in your HTML…

<object width="425" height="350">
   <param name="movie" value="http://www.youtube.com/v/8K_NQe57C-k"></param>
   <param name="wmode" value="transparent"></param>
   <embed src="http://www.youtube.com/v/8K_NQe57C-k" type="application/x-shockwave-flash" 
      wmode="transparent" width="425" height="350"></embed>
</object>

Which should translate to this in your browser…

That's really all there is to it. If all you want or need is a single video then you're done! If you want more videos, you can keep copying and pasting to put as many videos on the page as you want using just this same technique. Fear-not, however, for on this page you will find all the tricks and tips you need to manage multiple videos on your web page!

If the video above is still downloading and you're ready to move on click here to reset it, then read on to discover how to give this option to your visitors on your own pages!

How-to cancel a video download.

Everyone knows that if you want to get noticed on the net you need to do a top X list. The problem with embedding a bunch of videos on your page is that once the user starts watching one, even if he stops or pauses it, the download will continue in the background which makes moving onto the other videos increasingly difficult.

To illustrate this problem, here are two videos. We'll call them the best two videos ever made in the history of all known time and space. That way if this whole mega-reference thing doesn't work out I've got something to fall back on (it's not a reference page, it's an amazing list of super-cool videos with a bunch of weird babbling text around it!).

You'll note that even after you pause or stop the first video, the download doesn't stop. This means that if you start the second video you will likely have performance problems as the web page is now downloading two videos. If you have a top ten list, things can get pretty crazy by the time you get to the bottom of the page as your bandwidth is saturated by videos you decided you didn't want to see to the end. (You can cancel the above videos now if you wish)

The solution to this problem is a little bit of javascript code which will simply reset the video object.

<script type="text/javascript">
function resetVideo(divId) {
  if (typeof(divId)=="string") { divId=document.getElementById(divId); }
  if (divId.innerHTML) {
    org=divId.innerHTML;
    divId.innerHTML='';
    divId.innerHTML=org;
  }
  return false;
}
</script>

To use this snippet simply copy and paste this into the <head> section of your web page. All it does is accept the name of a division (or the object itself) and when called it will temporarily clear out all the contents of the object and then quickly restore it (effectively returning the contents to the way it was when the page first loaded).

Next, wrap any video you want to be able to reset in <div> tags. That is, copy and paste the video embed code from the video service just like you would ordinarily do but add a <div> tag around the embed. Make sure you give each <div> wrapper a unique id as such…

<div id='vid1'>
  <object width="425" height="350">
    <param name="movie" value="http://www.youtube.com/v/w-rcjaBWvx0"></param>
    <param name="wmode" value="transparent"></param>
    <embed src="http://www.youtube.com/v/w-rcjaBWvx0" type="application/x-shockwave-flash" 
      wmode="transparent" width="425" height="350">
    </embed>
  </object>
</div>

Now you can put a link anywhere on your page to reset a video like this…

<A HREF="#" onClick='return resetVideo("vid1")'>Reset Video #1</A>
<A HREF="#" onClick='return resetVideo("vid2")'>Reset Video #2</A>

When a user clicks on one of these links it will pass the division name to resetVideo where the division will be cleared and reconstructed, which effectively stops the video download dead in its tracks. For flexibility you can either pass the name of the division or you can pass the division as a getElementById object. Most people however will simply pass the name. Here's a relatively long video you can try the effect out on.

How to make a video select list.

If you have a number of videos to show off and can be reasonably sure the video will remain close to the links then a select list is a good option.

Here we just create a division to hold the video we want to play. (Feel completely free to modify or eliminate the style).

<div id='videoPlayback' style='width: 435px; height:350px; background-color: #800000;'></div>

Next we embed all the videos we want to be on the list, just like we did with the cancel only here we will add a small style to the division tag that will make the videos invisible. Remember, the id needs to be a unique name.

<div id='selectDemo1' style='display: none'>
  <object width="425" height="350">
    <param name="movie" value="http://www.youtube.com/v/-is63goeBgc"></param>
    <param name="wmode" value="transparent"></param>
    <embed src="http://www.youtube.com/v/-is63goeBgc&autoplay=1" 
      type="application/x-shockwave-flash" wmode="transparent" 
      width="425" height="350">
    </embed>
  </object>
</div> 

<div id='selectDemo2' style='display: none'>
  <object width="425" height="350">
    <param name="movie" value="http://www.youtube.com/v/c6SHsF1n9Qw"></param>
    <param name="wmode" value="transparent"></param>
    <embed src="http://www.youtube.com/v/c6SHsF1n9Qw&autoplay=1" 
      type="application/x-shockwave-flash" wmode="transparent" 
      width="425" height="350">
    </embed>
  </object>
</div> 

Then add a bunch of links which call a small Javascript function that will insert a copy of a hidden video into the playback division when the user clicks on a link.

<A HREF="#" onclick='return playVideo("selectDemo1","videoPlayback")'>RvD2: Ryan vs. Dorkman 2</A><BR>
<A HREF="#" onclick='return playVideo("selectDemo2","videoPlayback")'>Beatboxing Flute <q>Peter and the Wolf</q></A><BR>

For the benefit of your visitors without Javascript you should replace the pound signs (#) with the url of the video you are playing. This will allow your non-Javascript visitors to see the videos on the video service site while those with Javascript (nearly everyone) will be able to watch the videos quite nicely on your web page.

What makes the links work is the onclick event which calls playVideo, passing the name of the division we want to play and then the name of the division we want the video to play in (make sure you don't get them reversed!). All we need now is a VERY tiny Javascript function which will simply take the contents from the hidden division and place it in the playback division.

<script type="text/javascript">
function playVideo(sourceId, targetId) {
   if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
   if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
   targetId.innerHTML=sourceId.innerHTML;
   return false;
}
</script>

As with the cancel function, you can either pass the name of the divisions or pass the object itself.

Optionally you can provide a cancel link, just like we did in the previous section.

The videos in this example all autostart (see the autostart section below for details). We can't use the resetVideo function here since resetVideo simply destroys the video and re-creates it and it is created with modifications which start the video as soon as it's loaded. So all resetVideo would do would be to restart the video over from the very beginning, which -- when you stop to think about it -- is really quite evil.

It is, however, very simple to cancel an autostart video in a select list. Since the visible video is just a copy of a hidden division, all we have to do is to just delete (and not replace) the contents of the playback division. This is so simple it can be done in-line in the onclick event.

<A HREF="#" onclick='document.getElementById("videoPlayback").innerHTML=""; return false'>Cancel Video</A>

All this does is to get the videoPlayback division and clear out its contents. This isn't a big deal because the video still exists in the hidden divisions we used to copy into the playback division. Finally we return false so the browser won't try to actually go anywhere.

How to make a pop-up video in a new window.

Having a few videos embedded in a web page is all well and good but if you're writing a text article and using videos as a reference you don't necessarily want a bunch of big, bulky videos breaking the flow of your article. A better alternative is an ordinary text-link which will spawn a new window that will begin playing your video.

Here's a good example about picas and their rival in cuteness pandas. (Note these examples use autostart codes explained below).

As in our cancel example, we need to wrap the embedded video in a division, only now we'll apply a simple style to hide the contents, making them invisible on the page. The id will also have to be unique.

<div id='popvid1' style='display: none'>
   <embed style="width:400px; height:326px;" id="VideoPlayback" 
   type="application/x-shockwave-flash" 
   src="http://video.google.com/googleplayer.swf?docId=7066578568747223192&autoplay=1" 
   flashvars=""> </embed>
</div> 

Again this is just an ordinary video embed code copied and pasted from the video service (Google in this case) to your web page, and then wrapped in a simple <div> tag.

Now we just need a small, simple script to open a popup window and insert the video. Just copy this to the <head> section of your web page.

<script type="text/javascript">
var popvid = null;                          // will store the window reference

function popWin(divId) {
   if (typeof(divId)=='string') { divId=document.getElementById(divId); }
   if (!popvid||popvid.closed) {
      popvid=window.open('','vidplayer','width=450,height=390,status=no');
   }
   popvid.document.body.style.backgroundColor='black';
   popvid.focus();
   popvid.document.body.innerHTML='<BR><center>'+divId.innerHTML+'</center>';
   return false;
}

window.onunload=function() {
   // if the user is navigating away from the page, check to see if we
   // opened a video window and if we did, make sure it's closed.
   if (popvid) {
      popvid.close();
   }
}

</script>

This script creates two functions and one global variable. The global variable (popvid) keeps track of our pop-up window. Popwin will create the window if needed, make sure it's visible, and inserts the contents of our video division into the pop-up window.

The second function is attached to the window.unload event. When the user navigates away from the web page it ensures the popup video window is destroyed.

Now all that's left to do is to create the links that will reference the video! Note that you should replace the pound sign (#) with the actual URL of the video. We've kept the pound sign here for brevity but if the user doesn't have Javascript enabled they'll be taken to the top of this page if they click on a pop-up video link. If you provide a URL to the actual video, people without Javascript enabled will be taken to the actual video page while people with Javascript will get the convenient pop-up window.

<A HREF="#" onclick="return popWin('popvid1');" class=popup>picas</A>
<A HREF="#" onclick="return popWin('popvid2');" class=popup>pandas</A>

The pop-up is called in the onclick event. Simply pass the name of the division which contains the video and when the user clicks on that link, the code will be activated. It's really that simple. Since popWin returns FALSE and that's passed back to the onclick event, the href link won't actually be followed if the user has Javascript.

How-to make a DHTML pop-up, floating video.

Pop-up windows are simple and easy, but there are a lot of problems with them. Popup windows can be confusing for the user (one misclick and the pop-up window is buried and lost behind the browser and/or other applications), and there are a whole host of programs that exist to do nothing except make sure the user never, ever sees a pop-up window, even if it has been deliberately requested by the user.

A more modern and sensible solution is to use DHMTL to create a pop-up layer that floats over the web page. This takes a bit more work that simple pop-up windows, but there's less chance the browsers (or PlugIns) will interfere with the video and DHTML pop-ups are generally more user-friendly since they remain fixed within the context of the web-page.

For DHTML popups, we'll keep the same division wrapper for our video as the cancel examples, but we'll give the division some basic styles. We'll also give the divisions a classname of video, this is important so you can style the video layers in your style-sheet if you want, but it's mandatory because our Javascript will be looking for this class name to help ensure only one video plays at a time. If you make a style-sheet for the video class, feel free to move the style attributes into the style-sheet class. You can make any changes you wish to the styles however you MUST keep position: absolute and display:none.

<div id='vid1' class='video' style='position: absolute; display: none; 
       padding: 10px; background-color: #800000; border: 3px solid black'>
  <a href="#" onclick='return popVideo("close")' style='float: left; color: white;'>Close</a><BR>
  <object width="425" height="350">
    <param name="movie" value="http://www.youtube.com/v/w-rcjaBWvx0"></param>
    <param name="wmode" value="transparent"></param>
    <embed src="http://www.youtube.com/v/w-rcjaBWvx0" type="application/x-shockwave-flash" 
      wmode="transparent" width="425" height="350">
    </embed>
  </object>
</div>

The display:none style will keep this video hidden until it's activated and then when it is activated, the position is absolute it will float the video above the web page. All the other styles are optional but position and display must remain.

A hypertext link (Close) was added between the division tag and the object tag. It calls popVideo with a 'close' value which will close all videos. A close link should be provided on all of your video layers. Feel free to style the close link however you wish.

Now we just need a Javascript program to handle the pop-ups. (Warning, big wall of computer code incomming)…

<script type="text/javascript">
function getElementsByClass (searchClass) {
  // This function returns an array of all HTML objects with the
  // specified className.  Tag is optional   
  var returnArray = [];
  var els = document.getElementsByTagName('*');
  var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
  for (var i = 0; i < els.length; i++) {
    if ( pattern.test(els[i].className) ) { returnArray.push(els[i]); }
  }
  return returnArray;
}

function popVideo(vid, darken) {
  // This function accepts a division ID (vid), either a string or the actual
  // object itself.   vid is mandatory.   darken is optional, if it's true
  // the page will be greyed out under the video.
  var videos = getElementsByClass('video');     // Get all the videos on the page.
  var isplaying=null;
  for(i=0; i<videos.length; i++) {              // Loop through all the videos
    if (videos[i].style.display=='block') {     // This video is playing 
      isplaying=videos[i].id;                   // remember its name
      var tmp=videos[i].innerHTML;              // Get the division contents
      videos[i].innerHTML='';                   // destroy the contents
      videos[i].style.display='none';           // Terminate the video.
      videos[i].innerHTML=tmp;                  // rebuild the contents.
    }
  }
  // This handles the darkening of the background while a video is playing.
  // First we see if the dark layer exists.
  var dark=document.getElementById('darkenScreenObject');
  if (!dark) {
    // The dark layer doesn't exist, it's never been created.  So we'll
    // create it here and apply some basic styles.
    var tbody = document.getElementsByTagName("body")[0];
    var tnode = document.createElement('div');          // Create the layer.
        tnode.style.backgroundColor='rgb(0, 0, 0)';     // Make it black.
        tnode.style.opacity='0.7';                      // Set the opacity (firefox/Opera)
        tnode.style.MozOpacity='0.70';                  // Firefox 1.5
        tnode.style.filter='alpha(opacity=70)';         // IE.
        tnode.style.zIndex='1';                         // Zindex of 50 so it "floats"
        tnode.style.position='absolute';                // Position absolutely
        tnode.style.top='0px';                          // In the top
        tnode.style.left='0px';                         // Left corner of the page
        tnode.style.overflow='hidden';                  // Try to avoid making scroll bars            
        tnode.style.display='none';                     // Start out Hidden
        tnode.id='darkenScreenObject';                  // Name it so we can find it later
    tbody.appendChild(tnode);                           // Add it to the web page
    dark=document.getElementById('darkenScreenObject'); // Get the object.
  }
  dark.style.display='none';
  if ((isplaying==vid)||(/^close$/i.test(vid))) { return false; }
  if (typeof(vid)=="string") { vid=document.getElementById(vid); }
  if (vid&&typeof(vid)=="object") {
    if (darken) {
      // Calculate the page width and height 
      if( window.innerHeight && window.scrollMaxY )  { 
        var pageWidth = window.innerWidth + window.scrollMaxX;
        var pageHeight = window.innerHeight + window.scrollMaxY;
      } else if( document.body.scrollHeight > document.body.offsetHeight ) {
        var pageWidth = document.body.scrollWidth;
        var pageHeight = document.body.scrollHeight;
      } else { 
        var pageWidth = document.body.offsetWidth + document.body.offsetLeft; 
        var pageHeight = document.body.offsetHeight + document.body.offsetTop; 
      }
      //set the shader to cover the entire page and make it visible. 
      dark.style.width= pageWidth+'px';
      dark.style.height= pageHeight+'px';
      dark.style.display='block';				 
    }
    // Make the video visible and set the zindex so its on top of everything else
    vid.style.zIndex='100';    
    vid.style.display='block';
    var scrollTop = 0;
    if (document.documentElement && document.documentElement.scrollTop)
      scrollTop = document.documentElement.scrollTop;
    else if (document.body)
      scrollTop = document.body.scrollTop;

    // set the starting x and y position of the video
    vid.style.top=scrollTop+Math.floor((document.documentElement.clientHeight/2)-(vid.offsetHeight/2))+'px';
    vid.style.left=Math.floor((document.documentElement.clientWidth/2)-(vid.offsetWidth/2))+'px';
  }
  return false;
}
</script>

That's actually quite a bit of code, but all you have to do is copy and paste it into the <head> section of your web page. This code creates two new commands: getElementsByClass and popVideo. getElementsByClass is a toolbox function that simply searches each element on the HTML page and returns that element if it has the stylesheet class name we're looking for. In this case, the function will look for anything with a className of video. You don't actually have to have a .video class set up in a style-sheet, you just have to have your video divisions have a class attribute with a value of video. Since all your pop-up video layers will all have the video class name, it will be very easy for you to create and style a .video class in your stylesheet if you choose to do so.

The second function -- popVideo -- is the bread and butter here. As in our reset example you'll use a hypertext link to access the video and all you have to do is to pass it the division name and an optional grey out value. If you pass true as the second argument, the function will gray-out the screen -- Digg-style. If you don't pass a second argument then the screen will not be grayed out and the user will be free to play with other elements on the page while the video is playing. If he clicks another pop-up video link, the current video will stop playing and the new video will start. If he clicks the same link that's already playing the video will stop playing.

Here's how we'll set up the hypertext links. Note that you should replace the pound sign (#) with the actual youTube URL in the HREF attribute, this will allow people without Javascript enabled to still see the videos by linking directly to the video page. The pound (#) is left in the href attribute for this example to manage the horizontal width of the page.

<a href="#" onclick='return popVideo("vid4",true)'>Life of a Cell (will gray out the screen)</a>
<a href="#" onclick='return popVideo("vid5",true)'>Code Monkey (will gray out the screen)</a>
<a href="#" onclick='return popVideo("vid4")'>Life of a Cell (does not gray the screen)</a>
<a href="#" onclick='return popVideo("vid5")'>Code Monkey (does not gray the screen)</a>

Note that if we pass true as the second argument the video will appear over a gray screen. If we leave true off then the video will appear without a gray background.

And here are some examples. Note that Firefox has a bit of a bug when a video layer is over a <pre> element so this example may not work properly if the video appears over one of the code blocks on this page. On this page just scroll down a bit until the video does not appear over one of the gray code blocks. On your own page just make sure the video steers well clear of <pre> and <code> blocks (this should not be a problem for non-technical blogs).

Dancing (does not gray out the screen)
Code Monkey (will gray out the screen)
Ghengis Khan Moskow (does not gray out the screen)

These examples have been modified to start playing the videos automatically. You can find out how to do this in the Auto-start Section.

How-to drag and drop your video layers

Now that the video layer has been created it's an incredibly tiny step to letting the user drag and drop the window with the mouse. Aside from the cool factor, this has the practical effect of letting the user move the video to more easily interact with the underlaying page while the video is playing.

There are a few caveats. There's a performance hit when a playing video is moved. Not all browsers can handle it smoothly. Opera will pause and stutter while a video is being moved, Firefox and IE, however, handle drag and drop videos quite nicely. People with slower machines may encounter difficulty. Some of the video players (particularly msn's soapbox service) use so much of the computer's resources that even on a relatively beefy machine there may be performance problems, youTube and Google however tend to lend themselves well to drag and drop. Also if you gray out the background you shouldn't use the drag and drop module since the opacity layer creates a performance hit over and above everything else.

As browsers mature and antiquated machines are retired these caveats become less and less an issue. The vast majority of your visitors will have no problems with drag and drop video layers.

To see an example of drag and drop video simply click here for a drag and drop example. Now just click on the red areas of the video layer and drag it around. You can even drag the video off of the code areas which give firefox a few problems!

This example made all the video layers on this article drag and dropable. If you want, you can turn drag and drop off with this link.

To make the DHTML video layers drag and drop, simply copy the following code and paste it into the <head> section of your web page.

<script type="text/javascript">
var savedTarget=null;   // The layer being moved
var orgCursor=null;     // The original mouse style so we can restore it
var dragOK=false;       // True if we're allowed to move the element under mouse
var dragXoffset=0;      // How much we've moved the element on the horozontal
var dragYoffset=0;      // How much we've moved the element on the verticle

function moveHandler(e){
  // This function moves the layer when the mouse is moved.
  // it's called automatically by the onmousemove handler
  if (e == null) { e = window.event } 
  if (e.button<=1&&dragOK){
    savedTarget.style.left=e.clientX-dragXoffset+'px';
    savedTarget.style.top=e.clientY-dragYoffset+'px';
    return false;
  }
}

function cleanup(e) {
  // This is called when the user releases the mouse
  // it clears out the move and mouseup event handlers
  // and resets the cursor.
  document.onmousemove=null;
  document.onmouseup=null;
  savedTarget.style.cursor=orgCursor;
  dragOK=false;
  return false;
}

function dragHandler(e){
  // This is called when the user clicks on the page
  // It checks to see if the click happened over an
  // element with a class name of "video", if if it 
  // did, it sets up move and mouseup handlers.
  var cursorType='-moz-grabbing';
  if (e == null) { e = window.event; cursorType='move';} 
  var target = e.target != null ? e.target : e.srcElement;
  if (target.className=="video") {
    orgCursor=target.style.cursor;
    savedTarget=target;       
    target.style.cursor=cursorType;
    dragOK=true;
    dragXoffset=e.clientX-parseInt(target.style.left);
    dragYoffset=e.clientY-parseInt(target.style.top);
    document.onmousemove=moveHandler;
    document.onmouseup=cleanup;
    return false;
  }
}

//This next line will call dragHandler whenever
//the user clicks the mouse button on the page.
//Draghandler will check to see if the mouse is over
//a layer with the classname of 'video' and if so
//set up the drag and drop events.
document.onmousedown=dragHandler;
</script>

How-to Autostart Your Videos

Once you start using pop-ups to show your videos you will want to autostart those videos because there's no reason not to. By clicking on the link, the user has indicated he or she wants to see the video and there's no reason to make him or her click the video again to get it started. Unfortunately most of the major video services don't publish their autostart codes. Fortunately the autostart codes for most of the major services are indeed known. (Case is important in ALL of the examples below).

Although a great deal of effort has been expended, no autostart solutions exist for shoutfile, and yahoo video. If you know of a way to autostart any service not listed here, please drop me a note.

How to add a YouTube Video RSS Feed To Your Blog

Because pop-up videos allow you to manage an unlimited number of videos on the page, you now have the ability to add video feeds to your own web pages -- you don't even need access to server-side scripting to do this. Thanks to yahoo pipes, we can incorporate the feeds directly in the browser itself. A full tutorial on how to do this can be found in the article: Yahoo Pipes--RSS Without Server-Side Scripts. Here we'll just be using code snippets with minimal technical explination.

We'll be reusing the popVideo snippets above so keep that block in your web page.

The first step is to create a division where you want to put the video thumbnails. Each thumbnail is 140 pixels wide and 90 pixels high. If you don't style your division to have a width, the thumbnails will stretch all the way across the screen and then start wrapping. If you specify a width (say 250), you'll get two thumbnails per row. It's recommended you style the division with a width to keep things orderly. The id of the feed <div> must be youTubeLayer unless you modify the script.

<div id='youTubeLayer' style='width:500px;'></div>

Just insert that division wherever you want the feed thumbnails to appear on your page.

Now for the script itself.... Insert the following in the head section of your HTML. Remember you also need the popVideo block above as well.

<script language="JavaScript" type="text/javascript">

var maxPics=12;  // Change this if you want more items (if available)

function getFeed(feed, callback) {
  // This function calls a yahoopipe to request the feed passed to getFeed
  // When the json script (the feed results) has finished loading it will
  // call the function specified in the callback parameter.
  var pipeUrl='http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?_render=json&_callback='; 
  var newScript = document.createElement('script');
    newScript.type='text/javascript';
    newScript.src=pipeURL+callback+'&feed='+feed;
  document.getElementsByTagName("head")[0].appendChild(newScript);
}

function youTubeFeed(feed) {
   // This function is called automatically when the json script data from the
   // yahoo rss pipe has finished loading.  feed contains the feed data in json
   // notation.
   var tmp='';
   var embeds='';
   var max=(feed.value.items.length>maxPics) ? maxPics:feed.value.items.length;
   for (var i=0; (i<max); i++) {
      // Build the thumbnail and hypertext link.
      tmp+='<A HREF="'+feed.value.items[i].link+'" onclick="return popVideo(\'generatedIdX'+i+'\')">';
      tmp+='<img src="'+feed.value.items[i]['media:thumbnail'].url+'" ';
      tmp+='width="'+feed.value.items[i]['media:thumbnail'].width+'" ';
      tmp+='height="'+feed.value.items[i]['media:thumbnail'].height+'" ';
      tmp+='alt="RSS Video Feed" border="0" ';
      tmp+='title="'+feed.value.items[i]['media:title']+'"></a>';
      var url=feed.value.items[i].link;
      url=url.replace(/\?/,'').replace(/=/,'/')+'&autoplay=1';
      // Build the invisible division that holds the object for this video
      embeds+="<div id='generatedIdX"+i+"' class='video' "; 
      embeds+=" style='position: absolute; display: none; -moz-border-radius: 10px;";
      embeds+=" padding: 10px; background-color: #800000; border: 3px solid black'>";
      embeds+="<a href='#' onclick='return popVideo(\"close\")' style='float: left; ";
      embeds+="color: white;'>Close</a><BR>";
      embeds+="<object width='425' height='350'>";
      embeds+="<param name='movie' value='"+url+"'></param> ";
      embeds+="<param name='wmode' value='transparent'></param> ";
      embeds+="<embed src='"+url+"' type='application/x-shockwave-flash' "; 
      embeds+=" wmode='transparent' width='425' height='350'></embed></object>";
      embeds+="<BR><center style='color: white'>";
      embeds+=feed.value.items[i]['media:title']+"</center></div>";
   }
   // insert all the thumbnails and divisions into the 'youTubeLayer' division.
   document.getElementById('youTubeLayer').innerHTML=tmp+embeds;
}

window.onload=function() {
  // After this page has finished loading, request the associated video feed.
  getFeed('http://youtube.com/rss/global/most_discussed_today.rss','youTubeFeed');
}
</script>

This script calls a yahoo pipe which will fetch the associated video feed for you. All of this is done inside the browser, no server-side script on your side is required.

There are two things you'll want to be able to modify here. The first is the number of videos displayed. You can change this by changing the maxPics variable ( var maxPics=12; ) at the top of the script to the number you want. If you specify 10 and there are 50 videos in the feed, only the first 10 will be displayed. If you specify 10 and there are only 5 videos in the feed then all 5 videos will be displayed.

The second thing you'll want to do is to be able to select the feed. Youtube has quite a few good video feeds at http://www.youtube.com/rssls. The "Most Discussed Today" is one of the better choices and it's what the script uses as a default. If you'd like a different feed, click on the RSS link you'd like on the page then copy the URL from the browser's location line and replace the url in the following block of code…

window.onload=function() {
  // After this page has finished loading, request the associated video feed.
  getFeed('New URL Goes Here','youTubeFeed');
}

How to show only your YouTube video feed.

If you post your own movies to youTube and would like to show them off on your own web page then you can get your own personal feed by inserting your youTube user name in the feed URL as such…

getFeed('http://www.youtube.com/rss/user/Your UserName Goes Here/videos.rss','youTubeFeed');

Of course this works with any user. If you're a fan of a particular person on YouTube you can just paste their user name in the url.

Profit!

If everything worked out right you should now have a working YouTube video feed on your web page. Here's a working example with YouTube's most discussed today feed. (Firefox users will encounter problems with the code blocks on this page, the feed should work properly on pages which don't use <pre> and <code> blocks).