Getting a CSS/JS popup in front of embedded Youtube video

Getting a CSS/JS popup in front of embedded Youtube video

I have a popup for my site notice. The popup darkens the background and is
in front of everything else. Only an embedded Youtube video is still in
front of the popup, I guess because it is Flash. In Firefox the Video is
"almost" in the background, it just cuts some corners of the popup, in IE
the complete popup hides behind the Video. I already tried to give the
Video a lower z-index, but it won't work.
#light{
z-index:1001;
font-size: 10px;
}
#video{
margin: 20px 0px 0px 0px;
z-index:998;
}
<ul>
<li>
<iframe id="video" width="500" height="282"
src="http://www.youtube.com/embed/F4Z4-KCJ664" frameborder="0"
allowfullscreen></iframe>
</li>
</ul>