Flash overlay in IE

I have a flash player on my website and I would like to add an overlay where I can insert HTML. The idea is that the div containing the flash will animate its opacity to 0.5 before display the HTML. I got this working great in Google Chrome and Firefox, but as always, IE is giving me a headache. I set wmode to opaque (and also tried transparent), but IE is behaving strangely. To make my div show on top of the flash video, I set its position to absolute and give it higher z-index than any other element.

The problem is that IE9 does not show the HTML I append to my div from jQuery. Fair enough, I can live with adding it from PHP in a hidden div. However, the big problems are that IE will not let me animate the flash player's opacity unlike Chrome and Firefox (and possibly other browsers) as well as let me interact with the flash player. When the overlay is displayed, the player is no longer responding when I click on it.

Some workarounds are needed for IE, but I have not been able to find a workaround for the opacity fading so far. Now for the code.

DOM:

<div class="videoPaths" style="z-index: 9999;">
    This is the overlay container
</div>

<div class="videoWrapper">
    <script src="swfobject/swfobject.js"></script>

    <div id="VideoPlayer" class="embedded-video">
        <div class="no-flash">You don't have flash</div>
    </div>

    <script>swfobject.embedSWF("http://url.com/v.swf", "VideoPlayer", "590", "332", "9.0.0", "/swfobject/expressInstall.swf", {}, {wmode:'opaque', allowscriptaccess:'always', allowfullscreen:'true', FlashVars:'token=my_token&photo%5fid=my_id'}, {id:'VideoPlayer', name:'VideoPlayer'});</script>
</div>

JavaScript (jQuery): -- simplied for illustration purposes

// Animate opacity to 0.5
$('.videoWrapper').animate({ opacity: 0.5 }, { duration: 1000, queue: false, complete: function() { showOverlay(); } });

function showOverlay() {
    // Show overlay text
    $('.videoPaths').html('<h2>This is the overlay text I want to show</h2>');
}

CSS:

.videoPaths {
    position: absolute;
    top: 100px;
    text-align: center;
    width: 590px;
}

In the code above, the HTML that I append with jQuery is not shown, but like I said, I can fix that by adding it directly into the DOM, because then IE displays it. However, I would like the opacity animation to work, but IE9 does not appreciate开发者_如何学C it. Also, when doing like this, I cannot click on the player to start/stop the playback.

Any ideas? Any suggestions are greatly appreciated. Thank you in advance!

"When the overlay is displayed, the player is no longer responding when I click on it"

Yes, this is what happens when an html element is positioned on top of a swf; the swf is obscured so it can't be interacted with.

"IE will not let me animate the flash player's opacity unlike Chrome and Firefox"

IE is in general really bad at animating opacity, particularly IE8 (in my experience). The rendering engine actually seems to have gotten worse with later versions.