IE8 positions DIV overlay wrong way and keeps playing video when it's hidden.

Question

Hi! Please take a look at: http://www.binarymark.com/Products/PasswordGenerator/default.aspx (the Overview tab, on the diagram). The issue is wjen you click on any of the diagram elements say "Character Groups" all browsers, except IE8 behave well - that is they display the overlay, start playing a video, and when the overlay is closed, the video stops playing an the div is hidden. IE8, on the other hand has two flaws: it positions the overlay way towards the bottom and too much to the right, and even more annoyingly - it keeps playing video in the background even when the overlay div is closed! I use flowplayer.org/tools/overlay/ for overlay. Can you help please? Thanks.

Answer 1

It is a confirmed issue in IE (google it and you'll see plenty of complaints). This post on SO recommends some combination of removing and re-adding or cloning and re-adding the objects each time you show/hide the tabs.

An alternative approach, since it seems like you are solely using embedded YouTube videos, is to use the YouTube JavaScript Player API and stop the videos each time a tab is shown and/or hidden.

Updated to include example:

After digging into the YouTube JS API, I would recommend going with the former solution. There are two many cross-browser bugs if you don't load each video using SWFObject, which will end up being more work than you're probably willing to spend. I was able to get a cross browser solution working without SWFObject for a single video, but it won't translate easily into your current setup:

<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&amp;hl=en_US&amp;fs=1&amp;enablejsapi=1"&gt;&lt;/param&gt;
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/sUO4bnWtlnE&amp;hl=en_US&amp;fs=1&amp;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"&gt;&lt;/script&gt;
<script>
    (function () {
        var tab = $('#tab'),
            video1 = $('#video1')[0];
        $('#showhide').click(function (evt) {
            if (video1.pauseVideo) video1.pauseVideo();
            tab.toggle();
            return false;
        });
    })();
</script>

On jsFiddle here.