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

我的猜測是，我需要做某種綁定的（）事件和字符串替換改變autoplay=0到autoplay=1，但我已經嘗試了一些變化沒有任何成功

有什麼想法嗎？

Answer 1

首先將鏈接圖像的href更改爲您的YouTube網址，確保「autoplay=1」like this link（不是嵌入網址）。然後，甩掉你隱藏<div>和follow tip 4 on the FancyBox "Tips & Tricks" page這是相當直截了當：

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

• Quick example

這樣做，這樣，即使JS是殘疾人還是去觀看視頻，他們。