Hi folks!
I seem to have coded myself into a corner, and I’m hoping you can help me out.

On a product demo page, I have set up popup video modals based on hidden divs. Everything works great….except…

In IE (all versions as far as I can tell)
When the video window is closed (div hidden), the video keeps playing. This does not happen in any other browser.

From the research I managed, and this does not appear to be a unique problem.

http://www.webdeveloper.com/forum/sh...t=video+hidden

http://www.webdeveloper.com/forum/sh...t=video+hidden

http://www.webdeveloper.com/forum/sh...t=video+hidden

However, there doesn’t seem to be a good solution.
Some people are editing the flash video action script (which we do ~not~ have access to, unfortunately)

There seems to be some javascript that only ½ works.

HTML Code:
 <script type="text/javascript">
function resetVideo(divId) {
                                if (typeof(divId)=="string") { divId=document.getElementById(divId); }
                                if (divId.innerHTML) {
                                org=divId.innerHTML;
                                divId.innerHTML='';
                                divId.innerHTML=org;
                                }
                                return false;
}
</script>
I have implemented it on a test video. It stops the video playing when the window is closed, but when the user clicks the video a second time, it won’t play at all.

The only alternative I can see, is to make a "new window" pop up for each video (which is not what the designers wanted)

I’m stumped. at this point I'm coding in circles. Any suggestions you have will be most welcome. If I’m going in completely the wrong direction, let me know. Can you think of any other option to make this work?

on to the code!
HTML Code:
<div class="productContainer">
	<div class="productName">
		<p class="title">TESTING</p>
		<p class="description">TESTING Blah blah</p>
	</div>
	<div class="productDetail">
		<div class="videoThumbnail">
			<p><a href="#" onclick='return revealModal("demoTESTING"); playVideo("demoTESTING","demoTESTING")'><img src="uploadedImages/Our_Products/videoThumbnail.jpg" alt="Advertising Demo Video" name="TESTING" border="0" id="TESTING" title="Advertising" onMouseOver="MM_swapImage('TESTING','','/uploadedImages/Our_Products/videoThumbnail2.jpg','Advert','','http://cmsstagingdev/uploadedImages/Our_Products/advert_hover.jpg',0)" onMouseOut="MM_swapImgRestore()"/></a></p>
	  </div>
		<div class="clear"></div>
	</div>
</div>
<!-- pop up videos -->
<div id="demoTESTING" style="DISPLAY: none">
<div class="demoVideoModalBackground"></div>
<div class="demoVideoModalContainer764x549">
<div class="demoVideoModalContent">
<object id="demoTESTING" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="764" height="550">
	<param name="movie" value="/ProductDemos/Property/demo.swf" />
	<param name="quality" value="high" />
	<param name="base" value="/ProductDemos/Property/" />
	<param name="movie" value="/ProductDemos/Property/demo.swf" />
	<param name="wmode" value="transparent" />
<embed id="demoTESTING" style="margin-top: -15px" base="/ProductDemos/Property/" src="/ProductDemos/Property/demo.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="764" height="550" wmode="transparent" ></embed>
</object>
</div><A onClick='return resetVideo("demoTESTING")'><img id="button_id" class="demoVideoModalCloseButton" src="/uploadedImages/Our_Products/fancy_closebox.png" border="0"/></A></div>
</div>
Code:
function revealModal(parentDivID) {

    parentDiv = document.getElementById(parentDivID);
    window.onscroll = function() { parentDiv.style.top = document.body.scrollTop; };
    parentDiv.style.display = "block";
    parentDiv.style.top = document.body.scrollTop;
    var contentDiv = document.getElementById(parentDivID).childNodes[1];
    if (contentDiv !== null) {
        contentDiv.style.left = (getWindowWidth() - contentDiv.clientWidth) / 2 + "px";
        contentDiv.style.top = scrollTop() + (getWindowHeight() - contentDiv.clientHeight) / 2 + "px";
    }
}

function hideModal(divID) {
    document.getElementById(divID).style.display = "none";
}