YouTube IFrame に半透明の Div をオーバーレイする方法

YouTube iFrame 上に不透明な Div を埋め込む

YouTube iframe ビデオ上に半透明の Div をオーバーレイすると、次のような問題が発生する可能性があります。 HTML5 とその後のビデオ オブジェクトの iFrame への置き換え。 「wmode」パラメータを使用して背景の透明度を追加する標準的な方法は、もう適用できません。

幸いなことに、YouTube は、開発者が iframe URL に「wmode=opaque」パラメータを追加できるようにするソリューションを提供しています。このパラメータは、より低い z-index を iframe に割り当て、iframe 上の他の要素によって iframe をオーバーレイできるようにします。ページ。

HTML

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>
<div>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false">#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 50;
    color: #fff;
}

説明:

• iframe URL には、 「wmode=opaque」パラメータ。iframe が div によってオーバーレイされるようにします。
• div は、「fixed」プロパティを使用して配置され、画面全体に広がります (「top: 0」、「left: 0」)。 "、"幅: 100%"、および "高さ: 100%")。
• を使用して、半透明の背景が div に適用されます。 「背景: rgba(0, 0, 0, 0.8)」。 2 番目と 3 番目の値 (0, 0) を調整して、オーバーレイの色を変更します。
• div の z-index は 50 に設定され、iframe の上、ページ上の他のコンテンツの下に配置されます。 .