jQuery FancyBox YouTube視頻不起作用

Question

我有一種情況，我無法修改錨定標記的HTML代碼，但「href」屬性除外。因此，向錨標記添加一個類不是一個選項。

的HTML標記如下：

<a href="http://www.youtube.com/watch?v=#########&amp;autoplay=1"></a> 

向該等環節之間進行區分，我已經添加基於「href」屬性的jQuery代碼的選擇器。

的代碼如下：

(function ($) { 

    $('a[href*="youtube"]').fancybox({ 
      'padding' : 0, 
      'type' : 'swf', 
      'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
      'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' } 
      }); 
e.preventDefault(); 

})(jQuery); 

這似乎並沒有在所有的工作。誰能告訴我我要去哪裏？我正在使用Drupal，因此爲什麼我在頂部添加了該部分以啓用'$'。

我無法在控制檯中看到任何錯誤，頁面只是直接導航到YouTube頁面，無需JavaScript干預。

Answer 1

adding a class to the anchor tag is not an option 

，既然你可以隨時通過jQuery添加類像

不一定是真實的

$('a[href*="youtube"]').addClass("fancybox") 

無論如何，我個人不喜歡使用swf模式作爲youtube視頻，但iframe模式;這使得它們更容易處理和跨平臺兼容（包括iOS）

我會做的是，用.each()方法：

• 轉換使用JavaScript .replace()
• 綁定每一個href到embed格式每個錨到fancybox
• 設置新的轉換href使用fancybox href API選項

這是兩個的fancybox V1.3.4或V2.X工作代碼：

(function ($) { 
    $(document).ready(function(){ 
    $('a[href*=youtube]').each(function() { 
     // convert youtube swf href to embed for iframe 
     var thisHref = this.href 
         .replace(new RegExp("watch\\?v=", "i"), 'embed/') 
         .replace(new RegExp("&", "i"), '?'); 
     // bind fancybox to each anchor 
     $(this).fancybox({ 
      "padding" : 0, 
      "type" : "iframe", 
      // add trailing parameters to href (wmode) 
      "href" : thisHref + "&wmode=opaque" 
     }); // fancybox 
    }); // each 
    }); // ready 
})(jQuery); 

Notice我添加wmode=opaque，否則關閉按鈕將成爲YouTube視頻的後面。

見JSFIDDLE與1.3.4版本...或者JSFIDDLE與v2.1.4

Answer 2

你已經錯過了瓶蓋內的doc ready處理程序，並沒有必要爲e.preventDefault()：

(function ($) { 
    $(function(){ 
    $('a[href*="youtube"]').fancybox({ 
     'padding' : 0, 
     'type' : 'swf', 
     'href' : this.href.replace(/watch?v=/gi, 'v/'), 
     'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' } 
    });  
    }); 
})(jQuery);