CSS no Lanche

Em um post anterior, mostrei aqui como era possível criar um lightbox com vídeos do Youtube. Dessa vez, vou mostrar aqui um exemplo com vídeos do Vimeo.

O HTML é muito simples, simplesmente criei uma div com um link dentro, esse mesmo link deve conter o link para o vídeo do Vimeo, como você pode ver abaixo:

<div class="thumb">
	<a href="http://vimeo.com/22842883" title="Vimeo Lightbox Gallery" rel="lightbox"><span>Play</span></a>
</div>

Os thumbnails de cada vídeo são obtidos através da API do Vimeo. O resto fico por conta do JavaScript.

$.fn.center = function (relation) {
	var center_in = (relation) ? $(relation) : $(window);
        
	this.css("position","absolute");
	this.css("top", ( center_in.height() - this.height() ) / 2+center_in.scrollTop() + "px");
	this.css("left", ( center_in.width() - this.width() ) / 2+center_in.scrollLeft() + "px");
	this.css("z-index", "200");
	return this;
};

function vimeoid(url) {
	var vid = url.match(/^http:\/\/(?:www\.){0,1}vimeo\.com\/(\d+)$/);
	vid = vid[1];
	return vid;
};

(function(){
	$("a[rel='lightbox']").each(function(){
		var that = this,
		url = $(this).attr('href'),
		id = vimeoid(url),
		thumb = $('<img />');
	
		$.getJSON('http://www.vimeo.com/api/v2/video/' + id + '.json?callback=?', {format: "json"}, function(data) {
			thumb.attr({
				"src" : data[0].thumbnail_large,
				"alt" : data[0].title,
				"title" : data[0].title
			});
			$(that).append(thumb);
			$(that).append('<p>'+data[0].title+'</p>')
		});
	});
		
	var $overlay = $('<div id="overlay"></div>');
	var $lightbox = $('<div id="lightbox"><a href="#">[ fechar ]</a><div id="lightbox-inner"></div></div>');
	$("a[rel='lightbox']").click(function(e){
		e.preventDefault();
		var href = $(this).attr('href'),
		id = vimeoid(href);
		$overlay.appendTo('body');
		$lightbox.find('#lightbox-inner').html('<iframe src="http://player.vimeo.com/video/'+id+'?title=0&byline=0&portrait=0" width="650" height="366" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>');
		$lightbox.appendTo('body').center();	
	});
	
	$('#lightbox a').live('click', function(e){
		e.preventDefault();
		$('#overlay').remove();
		$('#lightbox').remove();
	});
}());

• Exemplo
• Download