How can I combine the lightbox tutorial with the html video one?

In the lightbox tutorial (jQuery Basics), the overlay is created so that an image is displayed in a lightbox when a link is clicked. I am trying to do the same on my end, except with html5 video. The problem I am having is that my event.preventDefault() is not working and when I click the link, it goes to the video's url. Funny thing is it will work if I replace everything with a image link. I'm guessing that this may not work with videos?

Here is the html: <div id="highlight-hl" class="highlight"> <div class="picdiv"> <img class="hlpicture" src="/Content/images/cvdash.png" /> </div> <div class="textdiv"> <h4 class="hltitle">Some title</h4> <p>Some text. For more information, click <a href="http://player.vimeo.com/external/79980337.hd.mp4?s=3ec85ef4ba9386dae20f6bd93e0d22ab&profile_id=113">here</a>.</p>

            </div>

Here is the jQuery:

        var $overlay = $('<div id="overlay"></div');
        var $video = $('<video type="video/mp4">');
        // append video to overlay
        $overlay.append($video);

        // add overlay
        $("body").append($overlay);

        //capture click event on span

        $('a').click(function(event) {
            event.preventDefault();
            var videolocation = $(this).attr("href");
            // update overlay with the video link
            $video.attr("src", videolocation);

            //show overlay
            $overlay.show();
        });

        // when overlay is clicked, hide it
        $overlay.click(function () {
            $overlay.hide();