ヘッダー画像の代わりに動画ヘッダー-Volar2

 

【Volar2】ではトップページのみですがヘッダー画像を動画ヘッダーに変えることができます。

 

 

可能な動画形式

設置可能な動画形式は拡張子が「.mp4」の動画のみです。

mp4動画であれば今は基本的にはどのブラウザでも表示可能です。

 

動画サイズ

動画の解像度は特に制限はありません。

ただしファイルサイズが大きいと読み込みに時間がかかるのでできるだけ軽量化することをおすすめします。

 

動画ヘッダーの高さ

動画の高さは【ブラウザの横幅に合わせて（縦横比率を保ったまま）高さが自動伸縮・高さを指定（600pxなど）・ブラウザの高さいっぱい（デモサイト）】の3種類から選択可能。専用の外部スタイル上で変更できます。

 

粗さ（ボケ感）解消エフェクト

ヘッダーに載せる動画は解像度（特に横幅）に関係なくブラウザの横幅いっぱいに表示される仕様（フルワイド）にしてます。

 

それゆえファイルサイズを落としたいがために解像度があまりに低いと（たとえば640pxとか）、ブラウザの広さに応じて伸びた画面は粗さが目立ったりボケ感がかなり強調される可能性もあります。

 

そういう時のためにボケ感を”イイ感じに見せる”効果もいくつか搭載してます。

①のモジュールには専用のスタイルが格納されてます。動画の高さはここで変更可能です。（デフォルトは【ブラウザの高さいっぱい】）

 

②のモジュールをダブルクリックすると下のような画面が開くので、赤線部分を登録済み動画のファイル名で差し替えます。（※一部を抜粋）

（※動画のSIRIUS2への登録方法はマニュアルに記載してます）

 

 

これだけで”とりあえず”ヘッダー画像エリアは動画ヘッダーでの表示に変わります。

 

【Volar2】の《ヘッダー画像の代わりに動画ヘッダー》はできるだけ設置手順を簡素化するべく、SIRIUS2のヘッダー画像設置機能をベースにカスタマイズしてます。

 

レイアウトは1カラム（ワイド）

トップページのヘッダーをインパクトのある動画に差し替えるくらいですからレイアウトは1カラム（ワイド）のみの対応及び動作チェックとなってます。

（通常の1カラムでもイケると思いますが、2カラム or 3カラムは動作保証外です。チェックしてません）

 

なおSIRIUS2のヘッダー画像の機能を”間借り”してるので、ロゴや（グローバル）メニューは通常通り表示されます。

 

オーバーレイが使える

【サイトオプション】→【デザインの設定】→【ヘッダーの設定】→『オーバーレイの表示』も機能します。

 

 

 

ヘッダー画像が一瞬表示される

【Volar2】の《ヘッダー画像の代わりに動画ヘッダー》はSIRIUS2のヘッダー画像表示機能を”間借り”してるせいか、動画ヘッダーが表示される前に一瞬だけヘッダー画像（header.jpg）が表示されてしまいます。

これはちょっとみっともない動作で可能な限り避けたいところ。

 

 

話がちょっとそれましたが、”ヘッダー画像が一瞬表示される”現象はおそらくファイルの読み込み順のせいかと思われます。

ただこれの変更（改修）作業はかなり手がかかりそうなので代替策を用意しました。

 

個人的には動画ヘッダーが表示されるまで”ゴースト画面”が一瞬でも出てしまうのが気持ち悪いので、それを隠すためDEMOサイトではシンプルなローディング画面を付けてあります。（※画像不使用）

 

【Volar2】には上記ローディング画面用の設定を搭載してるのでお好みでご利用ください。