Creating a YouTube Video Tabber
Commenta 
13th May , 2008
This tutorial is long overdue (I know), but better late than never, right!? In this quick tutorial, I’ll show you how I created the video tabber (using YouTube embedded videos - even though you can use any video embedding service) that can be seen on The Original Premium News Theme (one of the main selling points of the theme in my opinion).
When I coded this initially, I was very excited about it’s functionality; even though I realized that there’s superior coders out there, who’ll be able to custom-code something better. But the solution is pretty light-weight, slots into WP seamlessly and does the job beautifully. So let’s go…
Before we get started…
You’ve got to know that I’m not a great tutorial writer and this will be the first proper tutorial that I attempt to write. It will therefor not be perfect, but I will attempt to answer your questions in the comments. If I however don’t answer all the questions, it is because I’m busy… My aim with this tutorial is just to get your minds going and hopefully you can figure out the small bugs (if there’s any) on your own! 
But bear with me… I will be posting more tutorials and they will get better!
The Start
The WordPress Loop
Okay first off, here’s a bit of a warning / notice if you’re keen on using this feature… The only way to get the data from the WordPress database, is to query it using The Loop. Since multiple WP loops in a template can clash, I’d suggest that you include this section after your main posts (i.e. either in the sidebar or footer), as it will drastically reduce your chances of conflict. That said, if you code it correctly, you shouldn’t experience any problems…
Setting up the category
The way I coded the video tabber, was to retrieve the 5 latest posts from a category that I created and simply called “Video” (you can call it anything you want). You will also need the ID of this category, as we will be using it later.
Tabbing
To get the tabbing functionality going, I used idTabs from Sean Catchpole. You will need to download that script and copy it to a folder called /js/ in your template directory (rename the .js file to tabs.js). To be able to access the idTabs functions, you will need to edit the header.php file and include the following line of code before the </body> tag:
I’m not going to cover the complexities of the tabbing script itself, as I don’t even know how to customize the script… But read Sean’s usage instructions should you run into any problems…
The Videos
Basics
Just so that you understand the logic behind the feature, I thought I’d just give you the basic ideas I used in creating the video tabber. Basically you need to use two similar WordPress loops to create two of the same lists of videos (one will be displayed as the list of all the videos and the other will be the video panel itself).
The tabber works by displaying a div layer with the corresponding ID of that of the link that is being displayed. So when I publish the code, I will show you how you can give both the link and the div layer the same ID by using two of the same WP loops.
(I’ve included a text version of the PHP for this section below.)
The Video Frame
When we get to the styling, you’ll see why I did this… But before you get started, you’ll just need an empty div layer with an ID of “video-frame” like this:
The First Loop (Showing the list)
The first loop will display the list of 5 latest videos on the right-hand side of the video panel. This is what the code looks like:
This section of code will go into the “video-frame” div layer. Again, I’ve wrapped this section into a div layer (”video-right”) to make the styling a bit easier. Lines 3 & 4 are pretty self explanatory - so I won’t cover those… Then we have the first WP loop with a query post - note that you will need to jack your video category’s ID into the query_posts on Line 6.
If you are familiar with WordPress, you’ll be comfortable with the loop itself. All the loop does, is generate 5 list items (<li>) in an unordered list with the ID of “idTabs”. The hyperlink of each list item will link to the corresponding div layer to display the video.
The Second Loop (Showing the videos)
Now we will simply replicate the first loop, but the output will be different (by the way, this code goes into the “video-frame” div as well - right below the first loop)…
For styling purposes, this section is wrapped in the div layer with the ID “video-left”. Instead of outputting the latest 5 videos in an unordered list, we’re just outputting them as separate div layers all with their own (unique!) ID that will correspond to the hyperlink in the list.
Download the Text Version of this section!
The Stylesheet
Video Dimensions
Since I’ve simply copied the code from the Original Premium News Template, I’ll stick to the video dimensions we used for the theme. Note however that you can resize it any way you please. The current dimensions in use is a max width of 350px, which means that the height is 292px (if YouTube videos are kept in the same aspect ratio).
The Style
This is the minimum style needed to make the tabber work (and not look too bad) - you can obviously add normal CSS to this section as you please:
All of the above styles are pretty self-explanatory I think… You’ll see that I didn’t include any CSS attributes for the last two elements (lines 35 - 40), but I suggest you just include an unique background for those images to differentiate the links you are hovering over or to show the video you are currently viewing.
Download the stylesheet here
And that’s it! Promise!
That should get you going on a pretty wicked new video tabber that you can add to your blog… If you have any questions, I will try answer them below in the comments…
Give back some of the love…
I’d really appreciate it, if you could Stumble, Digg or whatever this post…