Öffnen Sie YouTube-Video in Fancybox jquery
Frage
Kann ich Youtube Video in fancybox.
Ich habe eine Liste von YouTube-Videos Links, für die Ex:
<a href="http://www.youtube.com/watch?v=PvbqV8W96D0" class="more">Play</a>
und fancybox:
$("a.more").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
Ich möchte nicht für jedes Video Neues einbetten Objekt erstellen.
Gibt es eine Plug-in oder eine andere Art und Weise, das zu tun?
Lösung
THIS IS BROKEN, SEE EDIT
<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>
Auf diese Weise, wenn der Benutzer JavaScript aktiviert ist öffnet sich ein fancybox mit dem youtube Video einbetten, wenn Javascript deaktiviert ist es der YouTube-Seite Videos öffnet. Wenn Sie möchten, können Sie hinzufügen
target="_blank"
zu jedem Link, wird es nicht auf den meisten doctypes bestätigen, aber es wird auf den Link in einem neuen Fenster geöffnet, wenn fancybox diese Seite nicht wählen.
EDIT
this
, ist oben, nicht korrekt verwiesen wird, so dass der Code nicht href
unter this
finden. Sie haben es so nennen:
$("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;
});
als abgedeckt unter http://fancybox.net/blog # 4, repliziert oben
Andere Tipps
Ich begann, indem sie die Antworten hier verwendet wird, sondern modifiziert sie YouTube neue iframe
Einbettung ...
$('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;
});
Wenn Sie Autoplay-Funktion, um es hinzuzufügen Wanna. Ersetzen Sie einfach
this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
mit
this.href = this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '&autoplay=1',
Auch können Sie das gleiche tun mit vimeo
this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1'),
mit
this.href = this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1') + '&autoplay=1',
Dies hat einen regulären Ausdruck, so dass es einfacher ist, nur zu kopieren und die YouTube-URL einfügen. Ist für groß, wenn Sie ein CMS für Clients verwenden.
/*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;
});
Thanx, Alexander!
Und, um die fancy-Schließen-Schaltfläche über der YouTube-Flash-Content Add 'wmode' auf 'swf' Parameter:
'swf': {'allowfullscreen':'true', 'wmode':'transparent'}