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, “

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

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

「WordPress」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

【2016年版】モバデビで絶賛稼働中のWordPressプラグイン

Avatar for ホシナ カズキ

ホシナ カズキ

「SNS Count Cache」v0.10.0におけるFacebook取得の不具合を解決する

Avatar for ホシナ カズキ

ホシナ カズキ

「SNS Count Cache」のFacebookカウント数取得できない問題を暫定的に解決した

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

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

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