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?

War es hilfreich?

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 ...

zu verwenden,
$('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'}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top