Ouvrir une vidéo sur youtube en Fancybox jquery

Question

Puis-je ouvrir youtube vidéo fancybox.

J'ai une liste de liens youtube de vidéos, par ex:

<a href="http://www.youtube.com/watch?v=PvbqV8W96D0" class="more">Play</a>

et fancybox:

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

Je ne veux pas créer pour chaque nouvel objet vidéo embed.

Y at-il une prise, ou une autre façon de le faire?

Answer 1

C'EST CASSÉ, VOIR 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>

De cette façon, si l'utilisateur javascript est activé, il ouvre une fancybox avec la vidéo embed youtube, si javascript est désactivé, il ouvre la page youtube de la vidéo. Si vous voulez, vous pouvez ajouter

target="_blank"

à chacun de vos liens, il ne validera pas sur la plupart des doctypes, mais il ouvrira le lien dans une nouvelle fenêtre si fancybox ne ramassez pas.

EDIT

this, ci-dessus, n'est pas correctement référencé, de sorte que le code ne trouvez pas href sous this. Vous devez appeler comme ceci:

$("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;
});

http://fancybox.net/blog # 4, reproduit ci-dessus

Answer 2

J'ai commencé à l'aide des réponses, mais il modifié pour utiliser l'intégration de nouveaux 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
    });
});

Answer 3

$("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;

            }); 

Answer 4

Si vous voulez ajouter la fonction d'exécution automatique à elle. Il suffit de remplacer

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

avec

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

vous pouvez également faire la même chose avec vimeo

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

avec

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

Answer 5

a une expression régulière de sorte qu'il est plus facile de simplement copier-coller l'adresse youtube. Est idéal lorsque vous utilisez un CMS pour les clients.

/*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;
});

Answer 6

Thanx, Alexander!

Et pour régler le bouton fantaisie à proximité ÉLEVÉ contenu du youtube ajouter « wmode » aux paramètres « swf »:

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