I've been working on this all day, and I'm at my wits' end. I'm using the Twitter Bootstrap with the latest version of jQuery; I have a series of anchor tags that are supposed to pass several data points to create a dynamically generated HTML5 video player in a modal window. Here's the HTML:

Code:
<a data-toggle="modal" 
          href="#modal1" 
         data-modOggSrc="Officiary.ogv" 
         data-modMp4Src="Officiary.mp4" 
         data-modWebmSrc="Officiary.webm" 
         data-modTitle="Web content management application" 
         class="btn btn-primary btn-lg btnVid">View</a>
As you can see, I'm trying to pass different versions of the same video to a JavaScript function that will test for supported video formats in the browser, create a new Video element, then attach the appropriate file name as the .src attribute of the Video element. However, when I write the jQuery .data() elements to the console, they all come back undefined!

Code:
        function insertVid() {
            if ($('div.modal-body video')) {
                $('div.modal-body').remove('video');
            } 
            var modOggSrc = $(this).data( 'modOggSrc' );
            var modMp4Src = $(this).data( 'modMp4Src' );
            var modWebmSrc = $(this).data( 'modWebmSrc' );
            console.log(jQuery.hasData(this));
            console.log('modOggSrc = ' + modOggSrc + '; ' + 'modMp4Src = ' + modMp4Src + '; ' + 'modWebmSrc = ' + modWebmSrc);
            // etc., etc.
The curious thing is, jQuery.hasData(this) returns a value of true to the console! I think I may be losing the JavaScript "this" element somewhere along the way. Here's how I'm calling the function:

Code:
        $(document).ready(function() {
            $('a.btnVid').click(function() {
                insertVid();
            });
        });
If only I could pass those video path/file values... and suggestions? TIA!