superponer div opaco sobre el iframe de youtube

¿Cómo puedo superponer un div con opacidad semitransparente sobre un video incrustado de iframe de 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;
}

editar (se agregó más aclaración): HTML5 se está acercando a nosotros, con más y más dispositivos que lo usan en lugar de flash, lo que complica la incrustación de videos de youtube, afortunadamente, youtube proporciona un iFrame incrustable especial que maneja todos los problemas de compatibilidad de incrustaciones de videos, pero ahora el método de trabajo anterior de superponer un objeto de video con un div semitransparente ya no es válido, ahora no puedo agregar un <param name="wmode" value="transparent">objeto, porque ahora es un iFrame, entonces, ¿cómo agrego un div opaco encima de el video incrustado iframe?

Información del sitio oficial de Adobe sobre este problema

El problema es cuando insertas un enlace de YouTube:

https://www.youtube.com/embed/kRvL6K8SEgY

en un iFrame, el wmode predeterminado tiene ventana, lo que esencialmente le da un índice z mayor que todo lo demás y se superpondrá sobre cualquier cosa.

Intente agregar este parámetro GET a su URL:

wmode = opaco

al igual que:

https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

Asegúrese de que sea el primer parámetro de la URL. Otros parámetros deben ir después

En la etiqueta iframe:

Ejemplo:

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

Tenga en cuenta que la solución wmode = transparent solo funciona si es la primera vez

http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0

No

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent

Hmm ... ¿qué es diferente esta vez? http://jsfiddle.net/fdsaP/2/

Renders en Chrome bien. ¿Lo necesitas en varios navegadores? Realmente ayuda ser específico.

EDITAR : Youtube muestra el objecty embedsin wmode explícito establecido, lo que significa que por defecto es "ventana", lo que significa que superpone todo . Necesitas:

a) Aloje la página que contiene el objeto / código de inserción usted mismo y agregue el elemento param wmode = "transparente" al objeto y el atributo para insertar si elige servir ambos elementos

b) Encuentra una manera de que YouTube los especifique.

Pasé un día jugando con CSS antes de encontrar la sugerencia de anataliocs. Agregue wmode=transparentcomo parámetro a la URL de YouTube:

<iframe title=<your frame title goes here> 
    src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"  
    scrolling="no" 
    frameborder="0" 
    width="640" 
    height="390" 
    style="border:none;">
</iframe>

Esto permite que el iframe herede el índice z de su contenedor para que su opaco <div>esté frente al iframe.

¿La superposición opaca tiene fines estéticos?

Si es así, puede utilizar:

#overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background: #000;
        pointer-events: none;
        opacity: 0.8;
        color: #fff;
}

'pointer-events: none' cambiará el comportamiento de superposición para que pueda ser físicamente opaco. Por supuesto, esto solo funcionará en buenos navegadores.