動画を表示させるカスタマイザー「ヘッダーメディア」設定方法

2017年10月20日 Wordpress NAndo

WordPress ver4.7の新機能で、カスタマイザーの「ヘッダー画像」が「ヘッダーメディア」に変わりました。

ヘッダーメディアでは、MP4やYoutubeの動画を管理画面で設定し、サイトに反映させる事ができるようになります。

設定がしやすく使いやすいので、ファーストビューで動画を見せるデザインのサイトに是非実装したい機能です。

動画のサイト活用例として吉田カバンなど。

動画ならではのプロダクトの見せ方があることがわかります。

吉田カバン
https://www.yoshidakaban.com/

ヘッダーメディアの使い方

function.phpに以下を追記します。

videoをtrueにすることで、ヘッダーメディア機能がオンになります。

ヘッダー画像同様、widthとheightは出力される動画のサイズになります。

ヘッダーメディアに変更されていることを確認。

クリックすると設定画面が開きます。

mp4かYoutubeの動画を挿入できるようになりました。

試しにYoutubeにアップされている適当なURLを入れてみます。

動画が表示されました。

ただし再生しても音声は出ません。

背景とかで再生される使い方を想定しているのかな。

画像も設定されている場合、動画の方が優先して表示されますが、JSで動画を読み込むため、読み込みタイミング的に一瞬画像が表示されてから動画が表示されることがあります。

(これがあまりイケてないと思うのは私だけではないはず)

なので、動画を設定するなら画像は一旦削除しておいたほうが良いかと思います。

ヘッダーメディアの出力HTML

当然っちゃ当然ですが、MP4かYoutubeか画像かで出力されるタグが変わります。

動画の再生と停止を制御するボタンも同時に出力されます。

動画をレスポンシブ対応する

レスポンシブに対応させるには、CSSを以下のようにします。

埋め込みYoutube動画のレスポンシブ対応でお馴染みなヤツです。

制御ボタンをデザインするなら、.wp-custom-header-video-button .wp-custom-header-video-pause .wp-custom-header-video-play にCSSを追記します。

ボタンじゃなくても、動画自体をクリックすることで再生と停止を繰り返す事ができます。

まとめ

自身のブログではなかなか使う機会はなさそうですが、クライアントワークでは今後多用しそうな機能です。

YoutubeのURLを入れ替えるだけで動画の差し替えが出来るのがとても簡単で良いですね。