jQuery: Tabs to show different videos

I have built a video player popup that looks开发者_C百科 very similar to: http://www.apple.com/findouthow/mac/

Here is what I have built so far:

What I want to do, is just like on the Apple website is allow the user to click the links on the sidebar and load in a different video. I have looked at various scripts such as jQuery UI Tabs and jQuery Tools Tabs but all seem not what I'm really after... either adding too much or too little functionality.

With it being videos, I wish to load them via AJAX so that they are not present on the page when not being used. Is their anything in existence that could do what I want? Or could someone point me in the right direction to build such a popup?

Thanks

I'm guessing that the videos are objects with embed, prolly flash, right?

What I did was the following, simply load the embed code from an external html page, or - if you got the luxury, send an ajax request with a unique id to a db server and get the embed code back.

Method 1:

$("#viewport").load("repository.html #vid_id",function() {                                                                                 
   $("#viewport object").attr("width", 600);                                               
   $("#viewport object").attr("height", 470);                                       
   $("embed[name='somename']").attr("width", 600);                                          
   $("embed[name='somename']").attr("height", 470);                                         
   osrc = $("embed[name='somename']").attr("src");                                          
   $("embed[name='somename']").attr("src", "http://newurl.com/" + osrc);                                        
   $("param[name='src']").attr("src", "http://newurl.com/" + osrc);
});

What this code does, is load a #vid_id from file repository.html, and than changes some attributes in it once it's loaded, using a callback function, for example, the width and height, and the src (might be needed if the object doesn't have absolute pathing, I know I needed it).

2nd Method:

$.get("get_vid.php", {vid_id: "video_id_wanted"}, function(data){
$("#viewport").html(data)
});

And of course on get_vid.php, you'll have a php code to handle the desirable video_id, aswell as a database table containing all the information of said embed.

Good Luck!