How to do the YouTube Video Cycle!

Submitted by aaron on Fri, 2008-11-14 13:05
Share this

As you might know by now, I'll be presenting a session at Do It With Drupal on December 10. If you didn't know, get a ticket, and then come back here! I'm currently building a YouTube clone with Drupal in my spare time. When I'm done with it all, I get to come talk with you folks about how I did it.

Obviously, I'm not going to replicate the entire YouTube site. There comes a point of diminishing returns, especially for something I'm doing for fun. So I have to pick and choose what pieces to build. (For the record, there will also be parts that I believe will be improvements on YouTube; not difficult, since I'm building it with Drupal.)

YouDrup Video Cycle

The video slide show on YouTube's front page would have been a case-in-point. It's built in Flash, and I figured I would skip it, since it's just eye candy. Normally for that, I would use jCarousel or Views Slideshow, but neither replicates YouTube's functionality, and they seemed out of place for this slider that slides 5 videos at a time. But then I remembered someone telling me about the jQuery Cycle plug-in, by the same author of the jQuery Media plug-in.

How I Did It (in 20 minutes, nonetheless)...

The solution isn't completely straight-forward, because of needing to switch out 5 items at a time. However, Views 2 has some really great tools to help out there.

After installing the modules I need (jQuery Plugins, which includes the jQuery Cycle plug-in, and jQ, which offers a unified developer's library and will offer a hopefully easy upgrade to Drupal 7's upcoming core Centralized jQuery plug-in manager), I rolled up my sleeves (and Firebug for examining the style elements).

First, I built a view with 25 nodes, so it could be easily divided by the 5 thumbnails in the slide show. It's sorted by the daily most popular. I'm not sure how YouTube chooses their "Videos being watched right now", but I figure this will give a fair rendition.

While building the view, you'll notice a little link labeled Theme: Information. Become friends with Theme: Information. She will help you solve some otherwise tough problems if you get to know her.

I clicked on that little link, and was presented with a long list of candidate theme template overrides. I took a quick look over, and decided on a Style output template, which prints out each row of data. I then simply overrode that template to split the rows into groups of five, and to invoke the jQuery Cycle plug-in.

<?php
// $Id$
/**
* @file views-view-unformatted--videos--block-4.tpl.php
* Default simple view template to display a list of rows.
* The filename corresponds to this particular view; if reproducing on your own site,
* you'll need to choose an appropriate file from the Style output group of Theme: Information.
*
* @ingroup views_templates
*/
// Make sure the jQ module is enabled, so we don't get PHP errors if we disable it in the future.
if (module_exists('jq')) {
   // I'm using jq_add here. It assumes you have the jQuery Cycle plug-in installed. That plug-in
   // comes bundled with the jQuery Plugins module, but you could also just drop it into a
   // /plugins or /sites/example.com/plugins folder and call it with the same method.
   jq_add('cycle');
   // Here's the actual call for our cycle slide show plug-in.
   // I'm using the 'shuffle' effect, shifting the images w/ top & left, slowing it from the default
   // with 'timeout', and using 'pause' to allow a pause on mouse hover. There are lots of cool
   // effects; see the plug-in home at malsup.com/jquery/cycle/.
   $js = <<<js
  $('#cycle-videos-$id').cycle({
    fx: 'shuffle',
    shuffle: {
      top: 30,
      left: 15,
    },
    pause: 1,
    timeout: 10000
  });
js;
   // Make it degrade gracefully in non-javascript browsers.
  $js = "if (Drupal.jsEnabled) {  $(document).ready(function() { $js  });  }";
  drupal_add_js($js, 'inline');
}
?>
<?php if (!empty($title)): ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<div id="cycle-videos-<?php print $id; ?>">
<?php
  $count = 0;
  $row_count = 0;
  // Cycle through all our divs.
  while ($count < sizeof($rows)) {
    // Each of these divs will be a separate frame in the cycle slide show.
    print '<div id="cycle-videos-'. $id .'-'. ($row_count++) .'" class="cycle-videos">';
    $inner_count = 0;
    // Now display 5 rows of data, each of which is just a thumbnail in this case.
    // Note this slide show is not limited to images. It could be text, videos, whatever.
    while ($inner_count < 5 && $count < sizeof($rows)) {
      print '<div class="'. $classes[$id] .'">'. $rows[$count++] ."</div>\n";
      $inner_count++;
    }
    print "</div>\n";
  }
?>
</div>

Finally, I cleaned up the CSS. That took over half of the time. I'm not going to explain that here. If you want to know how I did it, you can use Firebug to look at it from your browser.

That's it! You can see the results at YouDrup. (That site is still in progress, so wear your construction hat.)

I look forward to seeing you at Do It With Drupal next month! (I'll also be at DrupalCamp Philly next week and at DrupalCon DC in the spring if you can't make that.)