jQuery embedding youtube IE issue
<p>I have been working on a custom image slider featured here: </p>

<p>JQuery</p>

<pre><code>$(function(){
      $('.cont:gt(0)').hide();
      $("#parent").on("mouseenter", ".extraContent div", function(){
           var ind = $(this).index();
           $("#parent").find(".cont").stop().fadeTo(600,0,function(){
               $('#parent').find('.cont').eq(ind).stop().fadeTo(300,1);
           });
        });
        $('#parent .extraContent').on('click',function(){
             window.location=$(this).find("a").attr("href"); 
             return false;
        });
    });
</code></pre>

<p>CSS</p>

<pre><code>​#parent { width:400px; margin:auto}
.mainContent { width:430px; height:300px; border:1px solid #000;padding:5px; }
.extraContent {overflow:auto; width:450px;}
.extraContent div{float:left; width:90px; height:90px; border:1px solid #00F; margin:5px; padding:5px }
.extraContent div:hover { border:1px solid #0F0;cursor:pointer }
.cont{
   position:absolute;
}
</code></pre>

<p>HTML</p>

<pre><code>&lt;div id="parent"&gt;
    &lt;div class="mainContent"&gt;
        &lt;div class="cont"&gt; Content 1....&lt;/div&gt;
        &lt;div class="cont"&gt; Content 2....&lt;/div&gt;
        &lt;div class="cont"&gt;Content 3...&lt;br /&gt;&lt;iframe width="267" height="200" src="http://www.youtube.com/embed/6tlQn7iePV4?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;&lt;/div&gt;
        &lt;div class="cont"&gt; Content 4....&lt;/div&gt;  
    &lt;/div&gt;
    &lt;div class="extraContent"&gt;
        &lt;div&gt;&lt;p&gt;1 Custom content here &lt;br /&gt; &lt;a href=""&gt;Some link&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p&gt;2 Custom content here &lt;br /&gt; &lt;a href=""&gt;Some link&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p&gt;3 Custom content here &lt;br /&gt; &lt;a href=""&gt;Some link&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p&gt;4 Custom content here &lt;br /&gt; &lt;a href=""&gt;Some link&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;​
</code></pre>

<p>My problem is if I embed YouTube video straight from the site using there iframe it transitions fine in Chrome but Firefox &amp; IE just display the video straight away and each slide/div appears under the video, is this a known problem and doesn't anyone know a way I can get IE &amp; FF to behave.  </p>

<p>p.s. because this is going to be in a content management system the only way the user can embed the video is using the default code from youtube.</p>

<p><a href="http://jsfiddle.net/vrqdh/6/" rel="nofollow">FIDDLE HERE</a></p>
