Ouvrir une vidéo YouTube dans Fancybox jquery

Question

Puis-je ouvrir une vidéo youtube dans fancybox.

J'ai une liste de liens de vidéos YouTube, par exemple:

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

et fancubox:

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

Je ne veux pas créer pour chaque vidéo un nouvel objet d'intégration.

Il y a un plug-in ou un moyen de le faire?

Answer 1

C'EST CASSÉ, VOIR MODIFIER

<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 le javascript est activé, il ouvre une fancybox avec le youtube de la vidéo, si javascript est désactivé, il ouvre la vidéo youtube. Si vous le souhaitez, vous pouvez ajouter

target="_blank"

pour chacun de vos liens, il ne validez pas sur la plupart des doctypes, mais il va ouvrir le lien dans une nouvelle fenêtre si fancybox n'est pas à la ramasser.

MODIFIER

this, au-dessus, n'est-ce pas référencé correctement, de sorte que le code ne trouverez href sous this. Vous avez de l'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;
});

couverts à http://fancybox.net/blog n ° 4, reproduit ci-dessus

Answer 2

J'ai commencé par utiliser les réponses ici, mais je l'ai modifié pour utiliser le nouveau iframe intégration de 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 souhaitez y ajouter une fonction de lecture automatique. Remplacez simplement

 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 de même 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

Cela a une expression régulière, il est donc plus facile de simplement copier et coller l'url 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;
});