jQuery Lightbox per i video di YouTube
Googleggiando mi sono imbattuto in un bel plug-in per jQuery clone del più celebre Lightbox. Il plug-in in questione si chiama PrettyPhoto ed è, appunto, una evoluzione del classico lightbox per le immagini.
Con PrettyPhoto, infatti, è possibile ricreare l’effetto di lightbox anche per contenuti diversi dalle immagini come, ad esempio, i video di YouTube (ma non solo: possono essere “lightboxati” anche iframe, filmati flash, video di Vimeo o QuickTime, ecc.).
Per prima cosa è necessario scaricare il plug-in dal sito dell’autore.
Dopodichè è sufficiente copiare all’interno della cartella del nostro sito il file .js, il foglio di stile e le immagini.
Fatto questo basterà includere, all’interno del header della nostra pagina web il seguente codice:
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" media="screen" />
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Per aprire un video di YouTube nella finestra lightbox sarà sufficiente aggiungere rel="prettyPhoto" al semplice link alla pagina del video, in questo modo:
<a href="http://www.youtube.com/watch?v=Iau0e_Sm6QQ" rel="prettyPhoto">guarda il video</a>
Di seguito uno screenshot:
L’esempio completo può essere scaricato da questa pagina.
