在Fancybox jquery中打开YouTube视频

Question

我可以在fancybox中打开youtube视频吗？

我有一个youtube视频链接列表,例如:

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

和fancybox:

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

我不想为每个视频创建新的嵌入对象.

是否有插件或其他方法可以做到这一点？

Answer 1

这是破产,请看编辑

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

这样,如果用户javascript已启用,则会打开包含youtube嵌入视频的fancybox,如果禁用了javascript,则会打开视频的youtube页面.如果你想要你可以添加

target="_blank"

对于您的每个链接,它不会在大多数doctypes上验证,但如果fancybox没有提取它,它将在新窗口中打开链接.

编辑

this,上面不正确引用,因此代码将无法找到href下this.你必须这样称呼它:

$("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所述,在上面复制

Answer 2

我开始使用这里的答案,但修改它以使用YouTube的新iframe嵌入...

$('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

如果你想添加自动播放功能.只需更换

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

同

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

你也可以用vimeo做同样的事

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

同

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