How We Did It: Application Videos

It seemed that the obvious fit for video was to include it in our portfolio, since even a short video of an application in motion does more than any number of screenshots.

As most software projects should, our quest for fullscreen video backgrounds started with Google. These days, you can pretty much count on someone else having figured out, or at least having started to figure out, whatever challenge you're facing (hopefully we can be of some assistance in this regard, too!). We pretty quickly found vide.js, which bills itself as an "Easy as hell jQuery plugin for video backgrounds." We agree!

Once you've got vide.js linked, all you have to do is put a data-vide-bg tag on the elements you want to have a video background and you're good to go. Unfortunately, while this is in fact "easy as hell", running videos on every portfolio entry at once has a tendency to quite quickly eat up a device's resources. We needed a way to make sure we were only showing one video at a time.

To do that, we added a different data tag on the portfolio entries: data-video-path. We also use the vide className option to make sure all of the videos are labeled with .vide_video. Then, when we scroll the work into view, we just use this little function, which activates vide.js for that div.

function show_video(work_number) {
// Each .work_description has a data element that defines its video path
// Set that to the local variable video_path
var video_path = $('#work' + work_number).data('video-path');
// Call vide.js on the work # .work_video element
$('#work' + work_number + ' .work_video').vide(video_path);
}

Step two is to make sure that we're getting rid of any videos that aren't on the page. Part of the animation involves adding .scroll_away to the work video that we're getting rid of. Among its many functions is helping us grab the right video to delete. All we do is wait two seconds (the duration of the scroll_away animation), and then do the following:

$('.work_entry.scroll_away .vide_video').remove();

It's a simple little trick, but it does wonders to make sure our site treats visitors humanely.