Apri il video di YouTube in jQuery Fancybox

Posso aprire il video di youtube in fancybox.

Ho una lista di link per i video di YouTube, per esempio:

Play 

e fancybox:

 $("a.more").fancybox({ 'titleShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); 

Non voglio creare per ogni video un nuovo object incorporato.

C’è qualche plug-in o un altro modo per farlo?

QUESTO E ‘ROTTO, VEDI MODIFICA

  

In questo modo se l’utente javascript è abilitato apre una fancybox con il video di incorporamento di youtube, se javascript è disabilitato apre la pagina di YouTube del video. Se vuoi puoi aggiungere

 target="_blank" 

a ciascuno dei tuoi link, non verrà convalidato sulla maggior parte dei doctype, ma aprirà il link in una nuova finestra se fancybox non lo raccoglierà.

MODIFICARE

this , sopra, non è referenziato correttamente, quindi il codice non troverà href sotto this . Devi chiamarlo così:

 $("a.more").click(function() { $.fancybox({ 'padding' : 0, 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'title' : this.title, 'width' : 680, 'height' : 495, 'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 'type' : 'swf', 'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' } }); return false; }); 

come descritto su http://fancybox.net/blog # 4, replicato sopra

 $("a.more").click(function() { $.fancybox({ 'padding' : 0, 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'title' : this.title, 'width' : 680, 'height' : 495, 'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 'type' : 'swf', // <--add a comma here 'swf' : {'allowfullscreen':'true'} // <-- flashvars here }); return false; }); 

Ho iniziato utilizzando le risposte qui, ma l’ho modificato per utilizzare la nuova incorporazione di iframe YouTube …

 $('a.more').on('click', function(event) { event.preventDefault(); $.fancybox({ 'type' : 'iframe', // hide the related video suggestions and autoplay the video 'href' : this.href.replace(new RegExp('watch\\?v=', 'i'), 'embed/') + '?rel=0&autoplay=1', 'overlayShow' : true, 'centerOnScroll' : true, 'speedIn' : 100, 'speedOut' : 50, 'width' : 640, 'height' : 480 }); }); 

Se vuoi aggiungere la funzione autoplay ad esso. Basta sostituire

 this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 

con

 this.href = this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '&autoplay=1', 

anche tu puoi fare lo stesso con vimeo

 this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1'), 

con

 this.href = this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1') + '&autoplay=1', 

Questo ha un’espressione regolare, quindi è più semplice copiare e incollare l’url di YouTube. È perfetto per quando usi un CMS per i clienti.

 /*fancybox yt video*/ $(".fancybox-video").click(function() { $.fancybox({ padding: 0, 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'title' : this.title, 'width' : 795, 'height' : 447, 'href' : this.href.replace(new RegExp("watch.*v=","i"), "v/"), 'type' : 'swf', 'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' } }); return false; }); 

Grazie, Alessandro!

E per impostare il pulsante fancy-close sopra i contenuti flash di youtube aggiungere parametri ‘wmode’ a ‘swf’:

 'swf': {'allowfullscreen':'true', 'wmode':'transparent'}