みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

iframe API で読み込んだ YouTube動画のz-indexを有効にする

IE8などでは埋め込んだYouTubeプレーヤーがz-indexを無視して最前面にしゃしゃり出てくる現象が発生します。
今回はそれの解決策をメモしておきます。

iframe埋め込みの場合

iframe埋め込みの場合は貼り付け用URLにパラメータとして、

?wmode=transparent

を追加すればz-index通りの重なり順になります。


iframeAPIの場合

インスタンスをnewする際のパラメータとして渡します。

var player = new YT.Player(id, {
    width   : 640,     // 動画幅
    height  : 480,     // 動画高さ
    videoId : videoId, // 動画ID
    playerVars: {
        wmode : "transparent" // z-indexを有効にする
    }
});


これで万事OKなはずです。