Wie kann ich ein Div mit halbtransparenter Deckkraft über ein eingebettetes Youtube-Iframe-Video legen?

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>

CSS

#overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.8;
    /*background:rgba(255,255,255,0.8); or just this*/
    z-index:50;
    color:#fff;
}

edit (zusätzliche Klarstellung hinzugefügt): HTML5 rückt näher und es werden immer mehr Geräte verwendet, die es anstelle von Flash verwenden. Dies erschwert das Einbetten von YouTube-Videos. Zum Glück stellt YouTube einen speziellen einbettbaren iFrame zur Verfügung, der alle Kompatibilitätsprobleme beim Einbetten von Videos behandelt Das Überlagern eines Videoobjekts mit einem semitransparenten Div ist nicht mehr gültig. Ich kann jetzt kein @ hinzufüge<param name="wmode" value="transparent"> zu dem Objekt, da es sich nun um einen iFrame handelt. Wie füge ich also ein opakes div über das eingebettete iframe-Video hinzu?