YouTube iFrame に半透明の Div をオーバーレイするにはどうすればよいですか?

YouTube iFrame 上に半透明 Div をオーバーレイする

iFrame に埋め込まれた YouTube 動画では、半透明 Div をオーバーレイしようとするときに特有の課題が発生します。 -透明な分割。 を使用する以前の方法とは異なります。オブジェクト埋め込みの wmode="transparent" 要素、iFrame 実装 требует другой подход.

問題の理解

iFrame 埋め込みビデオの Z インデックスは次のとおりです。通常、ページ上の他のすべての要素よりも高くなります。これは、その上に配置された div が非表示になることを意味します。

解決策: iFrame URL に「wmode=opaque」を追加する

解決策は、YouTube iFrame を変更することです。 GET パラメータ wmode=opaque を追加して URL を取得します。このパラメータは、他の要素がビデオをオーバーレイできるモードでビデオをレンダリングすることを指定します。

使用法

これを実装するには、単に wmode=opaque をiFrame ソース URL の最初のパラメータ。例:

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

注:

• URL の最初のパラメータが wmode=opaque であることを確認してください。
• その他のパラメータwmode=opaque の後に追加する必要があります。

これらに従ってください手順を実行すると、埋め込まれた YouTube iFrame ビデオに半透明の div をオーバーレイできます。

以上がYouTube iFrame に半透明の Div をオーバーレイするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。