Youtube video doesn't stop in IE if I hide its parent div

Question

So for example I have a structure like this:

Javascript

function toggle(id){
    var element = document.getElementById("id");

    if(element.style.display != 'block'){
        element.style.display = 'none';
    } else {
        element.style.display = 'block';
    }
}

HTML

<div onclick="toggle('holder')">Toggle Video</div>

<div id="holder" style="display:none">
   <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/A_hp2ubJaNo?fs=1&amp;amp;hl=en_US&amp;amp;rel=0"&gt;&lt;/param&gt;&lt;param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/A_hp2ubJaNo?fs=1&amp;amp;hl=en_US&amp;amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
</div>

When I click Toggle Video the video shows up and starts playing, when I click it again the video hides out but the video is still playing in Internet Explorer!

Please do not post any answers with jQuery or any library, only pure Javascript, thanks !

Answer 1

Toggling the CSS display property is not a reliable way of killing Flash. As you have discovered, the behaviour is different between browsers. You'd be better off clipping the element from the DOM using domElement.parentNode.removeChild(domElement)