Aprire il video youtube in Fancybox jquery
Domanda
È possibile aprire il video youtube in fancybox.
Ho una lista di link video di YouTube, per esempio:
<a href="http://www.youtube.com/watch?v=PvbqV8W96D0" class="more">Play</a>
e fancybox:
$("a.more").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
Non voglio creare per ogni nuovo oggetto di incorporamento video.
C'è qualche plug-in, o di un altro modo per farlo?
Soluzione
Questo è rotto, vedere Modificare
<script type="text/javascript">
$("a.more").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {'wmode':'transparent','allowfullscreen':'true'}
});
</script>
In questo modo se l'utente sia abilitato JavaScript si apre una fancybox con il video embed di YouTube, se javascript è disabilitato si apre la pagina di YouTube del video. Se volete potete aggiungere
target="_blank"
a ciascuno dei tuoi link, non convaliderà sulla maggior parte DOCTYPE, ma sarà aprire il link in una nuova finestra se fancybox non raccoglierlo.
Modifica
this
, al di sopra, non è fatto riferimento in modo corretto, in modo che il codice non troverà href
sotto this
. Bisogna chiamare in questo modo:
$("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 coperto a http://fancybox.net/blog 4 #, replicato sopra
Altri suggerimenti
Ho iniziato utilizzando le risposte qui, ma modificato in modo da utilizzare nuova iframe
di YouTube embedding ...
$('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
});
});
$("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;
});
Se si vuole 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',
Inoltre è possibile 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',
Questa è un'espressione regolare in modo che sia più facile basta copiare e incollare l'URL di YouTube. È grande per quando si utilizza 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, Alexander!
E per impostare il pulsante di fantasia-chiusura sopra flash contenuto del youtube aggiungere 'wmode' ai parametri di 'swf':
'swf': {'allowfullscreen':'true', 'wmode':'transparent'}