I'm working on a website that has a flash player embedded, and I'm trying to add an overlay that can display HTML content. The plan is to have the flash element fade out to 0.5 opacity before showing the HTML text. It works perfectly in Google Chrome and Firefox, but Internet Explorer is causing some issues. I've set the wmode to opaque and tried transparent, but IE is not cooperating. To make the overlay display on top of the flash video, I've set its position to absolute and assigned a higher z-index than any other element.
The problem is that in IE9, the HTML content I add to the overlay using jQuery doesn't show up. I can work around this by adding it from PHP in a hidden div, but the real challenges lie in IE not allowing me to animate the flash player's opacity like Chrome and Firefox do, and also not letting me interact with the player once the overlay is visible.
I need some workarounds for IE, especially for the opacity fading issue. Now, let's take a look at 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): -- simplified 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 above code, the HTML content appended with jQuery is not displayed in IE, but I can workaround that issue. However, I'd like the opacity animation to work, which IE9 is not allowing. Also, I can't click on the player to control playback once the overlay is shown.
Any suggestions or ideas for resolving these issues in Internet Explorer would be greatly appreciated. Thank you in advance!