Question

Here is my HTML:

<a class="video iframe" href="http://www.youtube.com/watch?v=Psk2Pq03rv0&#38;fs=1">Arbitrary text</a>

Here is the Fancybox javascript:

<script type='text/javascript'>  
  $(document).ready(function(){  
    $("a.video").fancybox({  
      'href'    : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),  
      'type'    : 'swf',  
      'swf'     : {  
        'wmode' : 'transparent',  
        'allowfullscreen': 'true'  
      }  
    });  
    return false;  
  });
</script>

Firebug Console says:

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

As a result, clicking this link takes the user to YouTube and does not trigger Fancybox.
Changing the problematic line to 'href' : this.href.replace(new RegExp("watch?v=", "i"), 'v/'), which seems more correct to me, yields the same result.

Any advice?

EDIT: I adjusted my script to only include the parts relevant to my question.

Answer 1

Script tag should look like this

<script type='text/javascript'>
$(document).ready(function(){
    $("a.video").click(function() {
        $.fancybox({
                'padding' : 0,
                'autoScale' : false,
                'title' : this.title,
                'overlayOpacity' : '.6',
                'overlayColor' : '#333',
                'transitionIn' : 'none',
                'transitionOut' : 'none',
                'centerOnScroll' : false,
                'showCloseButton' : true,
                'hideOnOverlayClick': false,
                'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                'type' : 'swf',
                'swf' : {
                'wmode': 'transparent',
                'allowfullscreen': 'true'
                }
        });
        return false;
    });
});
</script>

url should look like this – add &fs=1 to the end of it

<a class="video iframe" href="http://www.youtube.com/watch?v=Psk2Pq03rv0&fs=1">Arbitrary text</a>