Наложение непрозрачного div на iframe youtube

Как я могу наложить div с полупрозрачной непрозрачностью поверх встроенного видео в iframe 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;
}

редактировать (добавлены дополнительные пояснения): HTML5 приближается к нам, все больше и больше устройств используют его вместо flash, что усложняет встраивание видео YouTube, к счастью, youtube предоставляет специальный встраиваемый iFrame, который решает все проблемы совместимости встраивания видео, но теперь уже работавший ранее метод наложения видеообъект с полупрозрачным div больше недействителен, теперь я не могу добавить к объекту , потому что теперь это iFrame , так как мне добавить непрозрачный div поверх встроенного видео iframe?