video de youtube abierta en FancyBox jQuery

Question

¿Puedo video de youtube abierta en FancyBox.

Tengo una lista de los vídeos de YouTube enlaces, por ejemplo:

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

y FancyBox:

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

No quiero crear para cada video nuevo objeto de inserción.

¿Hay algún enchufe, o una otra manera de hacer eso?

Answer 1

Se divide, consulte Editar

<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 esta forma, si el usuario está activado Javascript se abre un FancyBox con el vídeo embed de youtube, si javascript está deshabilitado se abre la página de YouTube del vídeo. Si se desea se puede añadir

target="_blank"

para cada uno de sus enlaces, no va a validar en la mayoría de doctypes, pero va a abrir el enlace en una nueva ventana si FancyBox no recogerlo.

editar

this, anteriormente, no se hace referencia correctamente, por lo que el código no se encuentra bajo href this. Tienes que llamar de esta manera:

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

como cubiertos en http://fancybox.net/blog # 4, replicado por encima

Answer 2

I activan a través de las respuestas aquí, pero lo modificó para utilizar las nuevas iframe de YouTube incrustación ...

$('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 Quiere añadir la función de reproducción automática a la misma. Simplemente reemplace

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

con

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

También se puede hacer lo mismo con vimeo

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

con

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

Answer 5

Esto tiene una expresión regular por lo que es más fácil simplemente copiar y pegar la URL de YouTube. Es ideal para cuando se utiliza un CMS para los clientes.

/*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

Gracias, Alexander!

Y para establecer el botón de fantasía-cierre por encima de complemento flash contenido del youtube 'embed' a 'swf' parámetros:

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