While hovering in a YouTube video, my megamenu collapses in IE9

Question

When I hover in a megamenu video, the whole mega menu collapses. This happens only in IE9

Here's my code:

<nav class="menu">
<ul>
<li><a href="#">Menu image 01</a></li>
<li><a href="#">Menu image 02</a>
 <div class="megamenu ">
 <h3 class="title">Youtube Video</h3>
 <iframe width="200" height="250" src="https://www.youtube.com/embed/_1lJZfZr0lI" frameborder="0" wmode="transparent" allowfullscreen></iframe>
 </div>
</li>
<li><a href="#">Menu image 03</a></li>
<li><a href="#">Menu image 04</a></li>
</ul>
</nav>

CSS

.menu{ width:100%; }
.menu ul{ width:100%; }
.menu ul li{ float:left;}
.menu ul li .megamenu{ display:none; position:absolute; width:100%; background-color:#ccc; left:0; }
.menu ul li:hover   .megamenu{ display:block; }

JSFiddle link

Answer 1

Add this to iframe src:

?wmode=transparent&rel=0

That should work