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;
}

編集（明確化を追加）： HTML5が近づいており、フラッシュの代わりにそれを使用するデバイスが増えているため、YouTube動画の埋め込みが複雑になっていますが、ありがたいことにYouTubeは、埋め込み動画の互換性に関するすべての問題を処理する特別な埋め込み可能なiFrameを提供していますが、ビデオオブジェクトを半透明のdivでオーバーレイする以前の方法は無効になり<param name="wmode" value="transparent">ました。オブジェクトにiFrame を追加したので、オブジェクトに追加できなくなりました。不透明なdivを上に追加するにはiframe埋め込みビデオ？

この問題に関するAdobe公式サイトの情報

問題は、YouTubeリンクを埋め込むときです。

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

iFrameでは、デフォルトのwmodeはウィンドウ処理されており、本質的にZインデックスが他のすべてよりも大きく、何でもオーバーレイされます。

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

wmode =不透明

そのようです：

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>

wmode = transparent修正は、それが最初の場合にのみ機能することに注意してください。

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

ない

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

うーん...今回は何が違うの？http://jsfiddle.net/fdsaP/2/

Chromeで正常にレンダリングします。クロスブラウザが必要ですか？それは本当に具体的であることを助けます。

EDIT：YouTubeのは、レンダリングobjectし、embedそれを、それはオーバーレイ手段「ウィンドウ」にデフォルトを意味し、明示的なWMODEが設定されたすべてのものを。次のいずれかを行う必要があります。

a）自分でオブジェクト/埋め込みコードを含むページをホストし、両方の要素を提供することを選択した場合はwmode = "transparent" param要素をオブジェクトと属性に追加して埋め込みます

b）YouTubeがそれらを指定する方法を見つけます。

アナタリオックスのヒントを見つける前に、CSSをいじるのに1日費やしました。wmode=transparentYouTube URLにパラメーターとして追加します。

<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>

これにより、iframeがそのコンテナーのz-indexを継承できるため、不透明<div>がiframeの前に配置されます。

美的目的のための不透明オーバーレイはありますか？

もしそうなら、あなたは使うことができます：

#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」は、オーバーレイの動作を変更して、物理的に不透明になるようにします。もちろん、これは優れたブラウザでのみ機能します。