少し前なら、ホームページのヘッダー画像に動きをつけようと思ったら、Flashが使われていました。
しかしその後、FlashはiPhoneで見れないことから、今ではjQueryで作成したスライダーが多くみられます。
さらに最近では、ヘッダー背景に動画を表示できるようになっています。私がこれを最初に見たのは「Wix」でした。
Wixなら数クリックで背景動画の実装が可能
エディタを開いて、動画を掲載したい箇所に「ストリップ」という背景を敷き、そこに動画を設定します。
自分の手持ちの動画はもちろん、ない場合はWixのフリー素材の動画を利用することができますから、３クリック程度で、ホームページに動画背景を追加することができます。
また、背景動画の高さなどの調整はドラッグ＆ドロップで行えますから、大変簡単です。
WordPressでも背景動画が使えるようになった
昨年暮れにリリースとなったWordPressテーマ「Twenty Seventeen」でも、ヘッダーに動画を表示できるようになりました。mp4動画あるいはYouTube動画の掲載が可能です。
しかし、ここで私はどハマりしました。ヘッダー全画面に動画を表示したいのですが、両サイドに黒い帯が出てしまいます。
実は最初は私の凡ミス、「Twenty Seventeen」の推奨ではないサイズの画像で動画を作成したことが原因であることがわかりました。しかし、推奨の2000×1200pxで作成しても、やはり両端に黒い帯が出ます。
ヘッダー画像だけに何時間も費やすわけにはいかないので、他の手段も考えつつ、WordPress.orgのサポートフォーラムに投稿し、返事を待つことにしました。
すると投稿から5時間程度で4件の返事をいただき、そのうちの1件がビンゴ！
16:9の比率、つまり2000×1125pxの画像で動画を作成することで、ヘッダー全面に動画を表示することが実現しました。
2000×1200 ちゃうやん！
実現はしましたが、長かった…何時間かかったか。Wixなら数クリックで済むのに。
ヘッダー背景に動画を実装している例
WordPressでの実装例として、こちらのサイトを見つけました。
⇒ ここをテーマTwenty Seventeenにしてのカスタマイズ一覧 | デフよん
推奨とは全然違うサイズですが、問題なく表示できていますね。横長だといいのかも。
Wixでの実装例としては、こちらのサイトをあげておきます。
背景だけでなく、右手の人物画像も動き出します…
こういうお遊びが手軽にできるのが、Wixの楽しいところです。
背景に動画を使えるなんて、表現の幅が広がって楽しくなりましたね。しかし、使いすぎはページ表示速度の低下につながりますので、ココ！というところだけに使うようにしましょう。
