FancyBox has been my number one preference when I need to implement a jQuery-based lightbox on any web page I am working on. It is the most customizable and extensible jQuery plugin for this function.

Since version 2.0, it also introduced a concept of ‘helpers’ to reduce the size of the main JS file and also to allow developers to play more with its functionality with less risk of breaking the core functions when they are updated. Below I am going to show a little trick to modify FancyBox’s media helper to allow Vimeo link to auto-close when the video finishes.

Vimeo API

The first step to achieve this is by understanding Vimeo Player JavaScript API and how to enable API calling for the videos. To save your time, there are two items you need to note:

1. You need to turn on the API using api=1 code and define the player ID ie. player_id=vimeoplayer
2. Use Froogaloop, a JS mini-library written by Vimeo to communicate with their API. It can be downloaded here.

Modifying Fancybox media helper file

By default, the media helper file from FancyBox does not define the API and player ID. So we need to make minor change with the helpers/jquery.fancybox-media.js:

vimeo : {
    matcher : /(?:vimeo(?:pro)?.com)\/(?:[^\d]+)?(\d+)(?:.*)/,
    params  : {
        autoplay      : 1,
        hd            : 1,
        show_title    : 1,
        show_byline   : 1,
        show_portrait : 0,
        fullscreen    : 1,
        api           : 1, // enable Vimeo Player API
        player_id     : 'fancybox-vimeo' // define Player ID
    },
    type : 'iframe',
    url  : '//player.vimeo.com/video/$1'
},

 

That’s it. You may want to save the helper file to another name, like jquery.fancybox-media.custom.js

Putting them together

First call FancyBox scripts like you usually do, including the customized media helper file and Froogaloop.

<link rel="stylesheet" href="/path/to/js/lib/fancybox.v2/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/path/to/js/lib/fancybox.v2/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="/path/to/js/lib/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/js/lib/fancybox.v2/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/path/to/js/lib/fancybox.v2/helpers/jquery.fancybox-media.custom.js?v=1.0.6"></script>
<script type="text/javascript" src="/path/to/js/lib/jquery.easing.js"></script>
<script type="text/javascript" src="/path/to/js/lib/froogaloop.min.js"></script>

Next, let’s try to call FancyBox that auto-closes when the video has finished playing:

<script type="text/javascript">
$(document).ready(function() {
    $("a#pt6vid").fancybox({
        tpl : {
            iframe   : '<iframe id="fancybox-vimeo" name="fancybox-vimeo" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0"></iframe>'
        },
        helpers : {
            media : {} // call media helper
        },
        // below is where we call Vimeo Player API
        afterLoad: function(current, previous) {
            var iframe = $('#fancybox-vimeo')[0],
                    player = $f(iframe);
            // When the player is ready, add listeners for pause, finish, and playProgress
            player.addEvent('ready', function() {
                player.addEvent('finish', function(id) {
                    $.fancybox.close();
                });
            });
        }
    });
});
</script>

Done.