View Full Version : Youtube Video Gallery

02-29-2012, 04:59 PM
Hi, I started with the template on this site:

However, I have about a dozen videos with more to come so I added a vertical scrollbar to navigate through the thumbnails. My problem is I don't know how to separate the main video player so that it doesn't scroll with the thumbnails.


<div id="middle4">
<div class="videobox" style="height: 360px; overflow-y: scroll;">
<li><a href="http://www.youtube.com/watch?v=iFGEHtqNZis">TRS 50X35</a></li>
<li><a href="http://www.youtube.com/watch?v=9CaN2KBYpo8">98X104 Automobile Shredder</a></li>
<li><a href="http://www.youtube.com/watch?v=BWHXX6u3tVk">60x60 Aluminum</a></li>
<li><a href="http://www.youtube.com/watch?v=ZiWDKtdfqWQ">60X60 System</a></li>
<li><a href="http://www.youtube.com/watch?v=VMbbXcFju9E">Portable Shredding System</a></li>
<li><a href="http://www.youtube.com/watch?v=WEn5xtJwtu4">60X85 System</a></li>
<li><a href="http://www.youtube.com/watch?v=1cOxYQB5icg">60X60 White Goods</a></li>




// Videobox object
VideoBox = Class.create();
VideoBox.prototype = {
// Initialize object.
initialize: function(index, item) {
this.index = index;
this.item = item;
this.list = this.item.getElementsBySelector('ul')[0];
// Create div.bigvideo and add it just before the ul.
this.bigvideo = document.createElement('div');
Element.addClassName(this.bigvideo, 'bigvideo');
this.item.insertBefore(this.bigvideo, this.list);
// Create array of videothumbs.
this.thumbs = new Array;
// Opera 9 doesn't like 'li a' in getElementsBySelector, so you
// have to break it apart.
var links = this.item.getElementsBySelector('li');
for (var i=0; i < links.length; i++) {
this.thumbs[i] = new VideoThumb(index, i, links[i].getElementsBySelector('a')[0]);
// Load up the first video.
// Replace existing video with new one.
swap: function(index) {
// IE 6 won't show the video unless something else is in the box.
// I chose to add a <br /> which I hide via CSS.
this.bigvideo.innerHTML = '<br /><object width="425" height="350"><param name="movie" value="' + this.thumbs[index].video + '"></param><param name="wmode" value="transparent"></param><embed src="' + this.thumbs[index].video + '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>';
// Deselect all the thumbnails.
// Select the current thumbnail.

// Videothumb object
VideoThumb = Class.create();
VideoThumb.prototype = {
// Initialize object.
initialize: function(boxindex, index, link) {
this.boxindex = boxindex;
this.index = index;
this.item = link;
this.href = this.item.getAttribute('href');
// Extract the v querystring value from the href. Youtube uses this
// value for everything.
this.videocode = this.href.toQueryParams().v;
// Direct link to the video for use in the object/embed
this.video = 'http://www.youtube.com/v/' + this.videocode;
// Create thumbnail image and append it inside the list item
var img = document.createElement('img');
img.src = 'http://img.youtube.com/vi/' + this.videocode + '/default.jpg';
img.alt = this.item.innerHTML;
img.title = this.item.innerHTML;
this.item.innerHTML = "";
// Observe the click event.
Event.observe(this.item, 'click', this.swap.bindAsEventListener(this));
swap: function(evt) {
// Call the swap method of the parent videobox with the thumbnail
// thumbnail index as a parameter.
// Stop the event so the browser doesn't follow the link.
if (evt) {
select: function() {
deselect: function() {

// Don't do anything if we're using Opera 8 or earlier.
if (!Prototype.Browser.Opera || (Prototype.Browser.Opera && navigator.userAgent.toLowerCase().charAt(navigator.userAgent.toLowerCase().indexOf('opera') + 6) > 8)) {
// Create array of videoboxes so you can have more than one on a page.
var aVB = new Array;
$$('div.videobox').each ( function(videobox, index) {
aVB[index] = new VideoBox(index, videobox);

02-29-2012, 10:25 PM
Any ideas? Would it take a few simple lines of code or something harder? I realize I'll probably need to add another <div> to the HTML for the main player, but I'm not sure what to change in the javascript.