I am loading an ajax page which executes an HTML5 video player script. The function for the Flash fallback is html5media(); :

//Load 1st Case Study
    $("#splash").live('click', function (e) {
        $(this).fadeOut('slow', function () {
            $('#case-studies').load('case-study-1.html', function() {
               html5media(); //initiate Flash fallback
            }).fadeIn();

        });
        e.preventDefault();
    });

This initial page load works fine in IE7 & IE8.

The problem is once this page is loaded, there are links to 4 more videos which are loaded in again using ajax. I use this function:

//Switcher
function csClients(url, client) {
    $("#case-studies").fadeOut('slow', function() {
        $('#case-studies').load(url, function () {
            html5media(); //initiate Flash fallback
        }).fadeIn();
    });
}

//Page Loader
$("#cs-client-list li.client1 a").live('click', function(e) {
    csClients('case-study-1.html', 'client1');
    e.preventDefault();
});

Originally I was using return false; but none of the sub-page Flash videos would load in IE7. When I switched to preventDefault, the videos loaded in IE7 but still not in IE8.

I also get a weird error in both IE7 & IE8 with no helpful feedback:

Error on Page:
Unspecified error.
/ (Line 49)
Code: 0 (Char 5) URI:
http://www.mysite.com

This is line 49 in my index page:

<section id="case-studies" class="main-section">

I have a feeling it has to do with calling html5media(); too many times? At a loss...