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を抜いてしまったほど。

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

「WordPressカスタマイズ」新着記事

ソーシャルメディアのトータルシェア数を条件にして記事をランダム表示する方法

Avatar for ホシナ カズキ

ホシナ カズキ

チャット風の会話形式コンテンツをプラグインなしで実装する方法

Avatar for ホシナ カズキ

ホシナ カズキ

【WordPress】パーマリンクからカテゴリーベースを取り除く方法

Avatar for ホシナ カズキ

ホシナ カズキ

ディレクトリを切ってインストールしたWordPressをドメイン直下で表示させる方法

Avatar for ホシナ カズキ

ホシナ カズキ

「RSS Footer」が開発終了したならfunctions.phpで同じことやればいいじゃない

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビはモバイルやウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく