web-dev-qa-db-fra.com

Ouvrir une vidéo YouTube dans Fancybox jquery

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 fancybox:

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

Existe-t-il un plug-in ou une autre façon de le faire?

jqueryyoutubefancybox
34
AlexC

CECI IS 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 l'utilisateur javascript est activé, il ouvre une boîte de fantaisie avec la vidéo incorporée 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 sera pas validé sur la plupart des doctypes, mais il ouvrira le lien dans une nouvelle fenêtre si fancybox ne le ramasse pas.

MODIFIER

this, ci-dessus, n'est pas référencé correctement, donc le code ne trouvera pas href sous this. Vous devez 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;
});

comme indiqué sur http://fancybox.net/blog # 4, reproduit ci-dessus

35
JKirchartz

J'ai commencé par utiliser les réponses ici, mais je l'ai modifiée pour utiliser la nouvelle intégration de iframe 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
    });
});
22
Sonny
$("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;

            });
21
AlexC

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',
5
Joshua Adrian

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

Merci, Alexander!

Et pour définir le bouton de fermeture fantaisie au-dessus du contenu flash de YouTube, ajoutez "wmode" aux paramètres "swf":

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