[解決済み] youtube の iframe に不透明な div を重ねる

質問

youtubeのiframeに埋め込まれた動画の上に、半透明の不透明度を持つdivを重ねるにはどうしたらよいでしょうか？

<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 (さらなる明確化を追加): HTML5は、フラッシュの代わりにそれを使用する、より多くのデバイスで、私たちに近づいている、これは、ユーチューブのビデオの埋め込みを複雑にし、幸いにもユーチューブは、ビデオの埋め込み互換性の問題のすべてを処理する特別な埋め込み可能なiFrameを提供しますが、今半透明のDivでビデオオブジェクトをオーバーレイの以前の作業方法はもはや有効ではありません、私は今、私は、ビデオオブジェクトを追加できないです <param name="wmode" value="transparent"> を追加することができません。iframe に埋め込まれたビデオの上に不透明な div を追加するにはどうすればよいですか？

どのように解決するのですか？

この問題についてのAdobe公式サイトからの情報

youtubeのリンクを埋め込むと問題が発生します。

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

iFrame では、デフォルトの wmode は windowed で、本質的に z-index が他のものより大きくなり、あらゆるものの上にオーバーレイするようになります。

この GET パラメータを URL に追加してみてください。

wmode=opaque

というように

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

URLの最初のパラメータであることを確認してください。 他のパラメータは

iframeタグの中で

例

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