iframe形式のプレーヤーにz-indexが効かないときの対処法

先日、ヘッダーデザインを変更したとき、固定ヘッダーをつける方法という記事を書きましたが、ちょっとそれに関連する話。

固定ヘッダーにして、そのヘッダーが全てのコンテンツの上を通るようにするためには、CSSのz-indexを指定します。しかしYouTubeやVimeoといった動画のプレイヤーを記事にEmbedすると、Google Chromeから閲覧したときに、固定バーの上にかぶってしまうという弱点があるのです。

これについては解決方法がちゃんとあって、動画のパラメーターに

?wmode=transparent

というのを入れてやれば、Google Chromeから閲覧しても固定バーが上になります。

とはいえ動画を記事に入れるたびに、このパラメーターを追加するのはややめんどくさいですよね。
しかし、そんなときこそWordPressのfunction.phpが役に立ってくれます。

function.phpに以下のコードを追加すればまるっと解決です。

function add_video_wmode_transparent($html) {
if (strpos($html, “

YouTubeやVimeoといった主要な動画共有サービスは、貼り付けるときに使われるEmbedのコードがiframeとなっていますが、上のコードをfunction.phpに挿れれば、YouTubeの動画プレーヤーであろうとVimeoの動画プレーヤーだろうと、?wmode=transparentのパラメーターが挿入されます。
もちろん過去にEmbedしたiframe形式のプレーヤーにも。

Firefoxなどの他のブラウザだと、z-indexの指定をするだけで動画プレーヤーが上になるということがないので、気づかないでそのままにしている人もいるかもしれませんが、今やGoogle ChromeのシェアはFirefoxを抜いてしまったほど。

自分では気づかなくても、自分のブログやサイトを見に来てくれた人の目には不格好に見えかねません。できるだけそうしたことを防ぐようにするためにも、固定ヘッダーを導入している場合は、このコードで対応したほうがいいと思います。