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

YouTube iFrame 上に透明な Div をオーバーレイ

iFrame を使用して YouTube 動画を埋め込むと互換性が向上しますが、動画をオーバーレイしようとすると特有の課題が生じます。ビデオの上に透明な div を追加します。この問題を解決するには、YouTube が提供する「wmode」GET パラメータを利用できます。

解決策:

1. パラメータを追加して YouTube 埋め込み URL を変更します。 URLの末尾に「?wmode=opaque」を追加します。これにより、ビデオが確実に「不透明」モードでレンダリングされます。
2. iframe タグで、「src」属性を更新して、変更された URL を含めます:

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

3. 「位置」、「上」、「左」、「幅」、「高さ」などのプロパティを利用して、オーバーレイ div の位置とスタイルを適切に設定します。

これらの変更を実装すると、オーバーレイ div が不透明な YouTube ビデオ上に正しく表示されます。

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