使用Fancybox自动播放嵌入式Youtube视频

Question

我在我的页面上有一个链接的图像,当点击它时会加载一个Fancybox模式框.它成功完成了这项工作,但我希望视频能够自动播放.如果我将YouTube网址设置为autoplay=1,则隐藏的DIV会在页面加载时在后台播放.

// Here is the linked image
<a id="inline" href="#video"><img src="someimage.jpg" alt="Description" /></a>

// Here is the hidden DIV
<div style="display:none">
  <div id="video">
    <iframe title="YouTube video player" width="640" height="390" src="###YOUTUBE LINK###rel=0&amp;hd=1&amp;autoplay=0" frameborder="0"></iframe>
  </div>
</div>

// Here is the script
<script type="text/javascript">
  $("a#inline").fancybox({
    'hideOnContentClick': true,
  });
</script>

我的猜测是我需要做一些Bind()事件和字符串替换来改变autoplay=0,autoplay=1但我尝试了一些变化没有任何成功

有什么想法吗？

Answer 1

首先将href您的关联图片更改为您的YouTube网址,确保" autoplay=1" 喜欢此链接(不是嵌入网址).然后在FancyBox"提示和技巧"页面上删除你的隐藏<div>和关注提示4,这是相当直接的:

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

• 快速举例

这样做,即使JS被禁用,人们仍然可以观看视频.