Fancybox iframe says that my YouTube href is undefined

Question

Here is my HTML:

<a class="video iframe" href="http://www.youtube.com/watch?v=Psk2Pq03rv0&amp;#38;fs=1"&gt;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;
});

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&amp;fs=1"&gt;Arbitrary text</a>

Answer 2

this.href, in that context, is referring to document, not the anchor.

$("a.video").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'
    }
});

Is equally written as:

var options = {
    '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'
    }
};
$("a.video").fancybox(options);

the anchor is not available in that context.

One option is to wrap the code in an each block

$("a.video").each(function(function(index, value)) {
   var obj = $(value);
   obj.fancybox({
        'padding' : 0,
        'autoScale' : false,
        'title' : this.title,
        'overlayOpacity' : '.6',
        'overlayColor' : '#333',
        'transitionIn' : 'none',
        'transitionOut' : 'none',
        'centerOnScroll' : false,
        'showCloseButton' : true,
        'hideOnOverlayClick': false,
        'href' : value.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type' : 'swf',
        'swf' : {
            'wmode': 'transparent',
            'allowfullscreen': 'true'
        }
    });
});