Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Thanked 0 Times in 0 Posts

    Youtube Video Gallery

    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);

  • #2
    New to the CF scene
    Join Date
    Jun 2011
    Thanked 0 Times in 0 Posts
    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.


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts