jQuery FancyBox YouTube videos not working

问题

I have a situation whereby I cannot modify the HTML code for the anchor tag, with the exception of the 'href' attribute. So adding a class to the anchor tag is not an option.

The HTML markup is as follows:

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

To distinguish between this and other links, I have added a selector based on the 'href' to the jQuery code.

The code is as follows:

(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);

This does not seem to be working at all. Can anyone tell me where I am going wrong? I am using Drupal, hence why I have added the part at the top to enable to '$'.

I cannot see any errors in the console, the page simply navigates straight to the YouTube page with no JavaScript intervention.

回答1:

adding a class to the anchor tag is not an option

That is not necessarily true since you can always add the class via jQuery like

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

Anyway, personally I don't like to use the swf mode for youtube videos any more but iframe mode; that makes them easier to handle and cross-platform compatible (including iOS)

What I would do is, using the .each() method :

convert every single href to embed format using javascript .replace()
bind each anchor to fancybox
set the new converted href using the fancybox href API option

This is the code that works for both fancybox v1.3.4 or 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 + "&amp;wmode=opaque"
        }); // fancybox
    }); // each
  }); // ready
})(jQuery);

Notice that I added wmode=opaque, otherwise the close button will be behind the youtube video.

See JSFIDDLE with version 1.3.4 ... or JSFIDDLE with v2.1.4

回答2:

You have missed the doc ready handler inside the closure and there is no need for the 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);

来源：https://stackoverflow.com/questions/15731290/jquery-fancybox-youtube-videos-not-working

标签

javascript

jquery

youtube

fancybox

fancybox-2