Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It is a confirmed issue in IE (google it and you'll see plenty of complaints). <a href="https://stackoverflow.com/questions/1806032/flash-video-still-playing-on-div-that-is-removed-using-jquery-ie-bug">This post on SO</a> recommends some combination of removing and re-adding or cloning and re-adding the objects each time you show/hide the tabs.</p> <p>An alternative approach, since it seems like you are solely using embedded YouTube videos, is to use the <a href="http://code.google.com/apis/youtube/js_api_reference.html" rel="nofollow noreferrer">YouTube JavaScript Player API</a> and stop the videos each time a tab is shown and/or hidden. </p> <p><strong>Updated to include example:</strong></p> <p>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> <pre><code>&lt;p&gt;&lt;a id="showhide" href="#show"&gt;show/hide with YT API pause&lt;/a&gt;&lt;/p&gt; &lt;div id="tab"&gt; &lt;object id="video1" width="640" height="385" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"&gt; &lt;param name="movie" value="http://www.youtube.com/v/sUO4bnWtlnE&amp;hl=en_US&amp;fs=1&amp;enablejsapi=1"&gt;&lt;/param&gt; &lt;param name="allowscriptaccess" value="always"&gt;&lt;/param&gt; &lt;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"&gt;&lt;/embed&gt; &lt;/object&gt; &lt;/div&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt; (function () { var tab = $('#tab'), video1 = $('#video1')[0]; $('#showhide').click(function (evt) { if (video1.pauseVideo) video1.pauseVideo(); tab.toggle(); return false; }); })(); &lt;/script&gt; </code></pre> <p>On jsFiddle <a href="http://jsfiddle.net/9ZnXY/" rel="nofollow noreferrer">here</a>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload