GreggHz

Mootools Video Gallery Tutorial

Recently I did some work for the folks over at The Good Line. As part of the project, I built a fairly simple video gallery for them. The gallery handles vimeo videos and uses the mootools javascript framework. Today I'd like to take a few minutes and outline how the gallery was created.

I should note that is a bit of server side magic going on that makes some of what I'm doing here quite a bit easier, however, in this post I would like to focus on the client side issues since the server side stuff is less interesting and any average programmer would come to similar solutions that I have found.

So to start, let's take a look at the html for the gallery. First the container for the actual player (this is the part that shows up after you click a video thumbnail):

<div id="video_wrap" style="display: none;">
    <div id="video">
        <iframe id="vid_frame"
                src=""
                width="990"
                height="555"
                frameborder="0"
                webkitAllowFullScreen
                allowFullScreen></iframe>
    </div>
    <div id="title"></div>
    <div id="description"></div>
</div>

The `display: none` makes sure that the player is hidden when the page loads. The three children divs (video, title and description) are what will hold the data from each video. When a video is loaded, the iframe's src attribute will be updated to be the appropriate Vimeo url, the title div will be updated with the title of the video and the description div will be updated to contain the description.

Now let's look at the html for each thumbnail.

<div class="thumb alpha grid_1" data-vid-id="28961992"
                                data-title="Fairbourne Consulting - SPEC AD"
                                data-description="">
    <img src="http://thegoodline.com/images/slir/w188-h106-c188:106/images/thumbs/28961992_200.jpg" title="Fairbourne Consulting" alt="Fairbourne Consulting" />
    <div class="vid_title">Fairbourne Consulting</div>
</div>

There are minor things worth mentioning here. First, the main div here uses the data-* attributes that html5 allows for storing arbitrary data. While it's not quite standards compliant if you're not using html, any browser will handle this data correctly. These data attributes hold the video id, title and description of the video. The image here is just a normal thumbnail. In my case, I used SLIR to dynamically generate the thumbnails from base images. This is required, but it makes life much easier (unfortunately, it's also beyond the scope of this article).

Each thumbnail uses the same markup with the data modified to match the video it is a thumbnail for. There are some important css classes I'm using though. You can see three of the classes used above (thumb, alpha, grid_1) and one not used above (omega). Below is the css for these classes:

.grid_1 {
    width: 188px;
    float: left;
    margin-left: 6px;
    margin-right: 6px;
}
.alpha {
    margin-left: 0px;
}
.omega {
    margin-right: 0px;
}
.thumb {
    width: 188px;
    cursor: pointer;
}

`grid_1` is what places each thumbnail into a column. `alpha` should be used when the thumbnail starts a new row. `omega` should be used when a thumbnail ends a row. `thumb` is used to make sure the thumbnails behave like links (the cursor turns into the pointer when hovered).

The remaining css is mostly cosmetic issues and should be much trouble to work out.

Now the interesting part. First of all, mootools must be included for this to work properly. A simple and quick way to do this is to use the Google Libraries API like this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>

The rest of the javascript will be inserted inside script tags just before the closing </body> tag.

var setVideo = function (src, title, description, callback) {
    $('vid_frame').addEvent('load', function (event) {
        callback(event);
        $('vid_frame').removeEvents('load');
    });

    $('vid_frame').set('src', src);
    $('title').set('html', title);
    $('description').set('html', description);
}

setVideo is a helper function that loads a new video into the player and issues the passed in callback. The parameters are simple enough to figure out I think. It also sets up an event listener so that when the new video finishes loading, an arbitrary callback is called. I'll explain what to do with that shortly.

Here's the function that will run when a thumbnail is clicked:

var onThumbClick = function (event) {
    var src = 'http://player.vimeo.com/video/'+this.get('data-vid-id')+'?title=0&byline=0&portrait=0&autoplay=0&color=ffffff';
    var title = this.get('data-title');
    var desc = this.get('data-description');
    
    if ($('video_wrap').getStyle('display') == 'none') {
        setVideo(src, title, desc, function () {
            $('video_wrap').reveal();
        });
    } else {
        var fade = new Fx.Tween($('video_wrap'), {
            property: 'opacity',
            link: 'chain',
            onComplete: function () {
                setVideo(src, title, desc, function () {
                    $('video_wrap').fade('in');
                    new Fx.Tween($('video_wrap'), {
                        property: 'opacity',
                        link: 'chain'
                    }).start(100);
                });
            }
        }).start(0);
    }
};

Now we need to make sure all of the thumbnails are clickable and that we call onThumbClick when the thumbnails are clicked. We're also binding thumb to the this variable for convenience.

$$('.thumb').each(function (thumb) {
    addEvent('click', onThumbClick.bind(this));
});

And that's it. Not so bad. You can see the finished result here: The Good Line