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 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!
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 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!