IE8 DIV line items do not overlap properly and continue to play videos when they are hidden

Question

Please take a look at: http://www.binarymark.com/Products/PasswordGenerator/default.aspx (Overview tab on the chart). The problem is that you click on any element of the chart, for example, "Symbol Groups", all browsers, except that IE8 behaves well - that is, they display the overlay, start playing the video, and when the overlay is closed, the video stops playing the div is hidden. IE8, on the other hand, has two drawbacks: it positions the overlay path to the bottom and too much to the right, and even more annoying - it continues to play video in the background, even when the overlay div is closed! I use flowplayer.org/tools/overlay/ for overlay. You can help? Thank.

Answer 1

This is a confirmed issue in IE (google and you will see many complaints). This SO post recommends using a combination of deleting and re-adding or cloning and re-adding objects every time you show / hide tabs.

An alternative approach, since it seems that you are using exclusively embedded YouTube videos, you should use the YouTube JavaScript Player API and stop the video every time the tab is displayed and / or hidden.

Updated to include an example:

JS API YouTube . SWFObject, , , , , . -, SWFObject , :

<p><a id="showhide" href="#show">show/hide with YT API pause</a></p>

<div id="tab">
    <object id="video1" width="640" height="385" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
        <param name="movie" value="http://www.youtube.com/v/sUO4bnWtlnE&hl=en_US&fs=1&enablejsapi=1"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/sUO4bnWtlnE&hl=en_US&fs=1&enablejsapi=1" type="application/x-shockwave-flash" allowscriptaccess="always"  width="640" height="385"></embed>
    </object>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    (function () {
        var tab = $('#tab'),
            video1 = $('#video1')[0];
        $('#showhide').click(function (evt) {
            if (video1.pauseVideo) video1.pauseVideo();
            tab.toggle();
            return false;
        });
    })();
</script>

jsFiddle .