Come posso sovrapporre un div con opacità semitrasparente su un video incorporato iframe di YouTube?
<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;
}
modifica (aggiunti ulteriori chiarimenti):
HTML5 si sta avvicinando a noi, con sempre più dispositivi che lo utilizzano al posto di flash, il che complica l'incorporamento dei video di YouTube, per fortuna YouTube fornisce uno speciale iFrame incorporabile con gestisce tutti i problemi di compatibilità dell'incorporamento video, ma ora il metodo precedentemente funzionante di sovrapporre un oggetto video con un div semitrasparente non è più valido, ora non sono in grado di aggiungere un <param name="wmode" value="transparent">
all'oggetto, perché ora è un iFrame, quindi come faccio ad aggiungere un div opaco sopra il video incorporato nell'iframe?