Video Unit

機能紹介

「BizVektor Video Unit」は 無料WordPressテンプレート「BizVektor」 用のプラグインです。

このプラグインを使用するとBizVektorのメインビジュアルをスライドショーから動画に変更することができます。管理画面からの操作でYouTubeにアップロードした動画または、WebM/MP4形式の動画を画面いっぱいに表示します。

BizVektorの全てのデザインスキンで利用可能で、もちろんレスポンシブなのでタブレットやスマートフォン対応です。

メインビジュアルを動画で表示することで、躍動感や水々しさ、温度感やその場の雰囲気、商品の魅力など画像より感覚的に伝えることができます。

上記のデモサイトでは 拡張デザインスキン Vast（別売り） を使用しています。

※モバイル端末では動画表示のされ方がデスクトップの表示とは異なります。仕様の欄とデモサイトで動作をご確認の上購入下さい。

※BizVektor Global Edition では正常に動作しません。

BizVektor Video Unit の利用シーン

動く商品を紹介・販売するサイト

動画なら、車やバイク、自転車、スポーツ用品など動くことに関する商品の魅力を伝えるのに効果的です。颯爽と走るバイクや自転車、スポーツシューズやウェアを身につけてスポーツする様子など、その商品のイメージを強く感じてもらうことができます。

この動画のデモサイトを見る

飲食店サイト

できたてのお料理の湯気が立ち上る様子やグツグツという音を動画でみせると、魅力がグッと伝わります。居酒屋、Barなどお酒を販売しているお店なら、ビールの泡立つ様子やワインがボトルから注がれる様子なども、感覚を刺激できてよいでしょう。

飲食店はお店の雰囲気が重要視されることもあります。お店の様子を動画でみせて雰囲気を感じてもらうことも可能です。

ペット用品の販売サイトやドッグランなどの施設を紹介するサイト

まっしぐらにフードやおもちゃに飛びつく様子や、生き生きと楽しそうに走り回るペットの様子がサイトのトップで目に入ってくるとユーザーの興味もより深まります。

その他にも、スポーツ施設やスポーツバー、ライブハウスのサイトなど…、動画ならアイデア次第でアピールしたいものの魅力を十分に伝えることができます。

BizVektor Video Unitの使い方

1. ダウンロードしたファイルをWordPressのプラグインフォルダにアップロードしていただくか、
   管理画面の「プラグイン」→「新規追加」→ プラグインのアップロード よりzipファイルをアップロードします。
2. 管理画面の「プラグイン」より「BizVektor Video Unit」の有効化をクリックします。有効化をクリックした時点でデフォルトで付属されている動画がトップページのメインビジュアルのエリアへ表示されます。
3. 「設定」→「BizVektor Video Unit」より設定画面に移動し、動画設定やデザイン設定を行います。

表示する動画の設定

Youtubeにアップロードした動画を表示するか、WebM/MP4形式の動画ファイルをWordPressにアップロードして表示するかを選択できます。

Youtubeなら、撮影した動画をモバイル端末やパソコンから手軽にアップロードできます。動画ファイルを用意するのが大変な場合はYoutubeをご利用いただくと便利です。

動画をWordPressにアップロードして表示するには、動画のWebMファイル版とMP4ファイル版の2つをご用意頂く必要があります。

※主要な最新ブラウザではMP4ファイルの動画再生が可能ですが、一部の古いブラウザでMP4ファイルの再生ができないためWebMファイルが必要となります。ターゲットとするブラウザがMP4ファイルの再生が可能であればMP4ファイルのみでも問題ありません。

Youtubeの動画を表示する

「表示タイプ」で「Youtube」を選択し、「Youtube動画」にYoutubeの動画IDを入力して下さい。

Youtubeの動画IDを確認する

Youtubeの動画IDは公開ページURLの「watch?v=」の後に続く文字列部分です。

又は、Youtube動画ページの「共有」をクリックして出現するURLの「youtu.be/」の後に続く文字列部分でもIDを確認できます。

Youtubeにアップロードした動画を使用する際の注意点

Youtubeには動画のURLを知らないユーザーには見られないようにできる「限定公開」という設定があります。Youtube上で検索されたくない場合には動画を「限定公開」にしましょう。（動画のプライバシー設定を変更する – YouTube ヘルプ）

また、「配信オプション」を「埋め込みを許可」する設定にしていないと動画が表示できませんのでご注意下さい。（動画と再生リストを埋め込む – YouTube ヘルプ）

Youtubeでの表示を選択した場合、Youtube側のAPIの仕様変更などで正常に動画が表示できなくなる可能性がございます。

Uploadファイルの動画を表示する

「表示タイプ」で「Upload」を選択し、「アップロード動画」でWebm形式/MP4形式のビデオファイルをそれぞれの項目よりアップロードして下さい。

動画ファイルを使用する場合は、画質を落とすなどしてなるべく動画ファイルサイズを軽くするようにして下さい。パターンフィルターやカラーフィルターをご利用いただくと画質の荒さをカバーできます。

「初期設定に戻す」ボタンをクリックでデフォルトの動画へ戻すことができます。

動画の共通設定

「代替え画像URL」で動画が表示できない時や、動画を読み込んでいる間に代替えとして表示する画像を設定して下さい。「モバイル用代替え画像URL」でモバイルで表示された時の代替え画像を設定できます。

動画を繰り返し再生する場合は「ループ再生」で「動画をループ再生する」にチェックを入れて下さい。

また、ループ再生をしない設定にした場合、再生が終了したら「代替え画像」で設定した画像を表示することができます。再生が終了したら代替画像を表示したい場合はチェックを入れて下さい。

「モバイル表示」でウィンドウサイズが768px以下のモバイル端末での表示を、動画を表示せず代替え画像のみ表示することができます。代替え画像のみ表示する場合はチェックを入れて下さい。

※モバイル端末では機種により動画の自動再生がされません。iOS10 搭載のモバイル端末以外ではアクセスされた際には再生ボタンを表示し、ユーザーが再生ボタンをタップしたら別ウィンドウで動画が再生される仕様です。（アンドロイドでは同画面で再生されます）

※表示タイプで「Youtube」を選択した場合、モバイル端末では Youtube アプリで動画を再生します。

また、動画は静止画よりもファイルのサイズが大きくなることが多く、PCでの表示と比べて動画の再生に時間がかかることが想定されるため、代替画像のみ表示する設定を設けています。

「変更を保存」ボタンをクリックで動画設定を完了します。

デザイン設定

BizVektor Video Unitでは動画の上に重ねて、タイトル（又はテキスト画像やロゴなど）・テキスト・リンクボタンを表示することができます。また、動画の上にドット柄などのパターンフィルターやカラーフィルターをかけて動画の雰囲気を調整できます。

この「デザイン設定」は 外観 > カスタマイズ > BizVektor Video Unit Custom で実際の仕上がりを見ながら設定することも可能です。

セクション要素の設定

「セクション要素」で、タイトル（又はテキスト画像やロゴなど）・キャプションテキスト・リンクボタンの入力があったものが動画上に表示されます。何も表示したくない場合は「セクション要素」の項目をすべて空にして下さい。

モバイル表示の際に、表示エリア内に収まらなかったりバランスが悪くなることがあるため、各要素の設定に「モバイルでは非表示にする」という項目を設けました。チェックを入れて頂くとモバイル時には非表示になります。

タイトル → タイトルとなるテキスト又は、タイトルにあたる画像を入力して下さい。ここで入力された要素は<h1>タグで表示されます。テキストと画像の両方が設定されている場合は画像を優先して表示します。

キャプションテキスト → キャプションとなるテキストを入力して下さい。このエリアでは <br> / <strong> / <span> タグを使用することができます。

ボタン → リンクボタンに表示するテキスト、リンクURLを入力し、ボタンのリンク先を別ウィンドウで開く場合はチェックを入れて下さい。ボタンの色はお好きな色に変更できます、カラーピッカーで変更する色を選択して下さい。

「セクション横幅」でタイトル・キャプションテキスト・リンクボタンが入るセクション要素の横幅を設定することができます。950px以下の数値を入力して下さい。単位はpxです。

セクション要素を 左寄せ / 中央寄せ / 右寄せ のいずれかの位置で設定できます。「セクション位置設定」で表示したい位置を選択して下さい。

フィルター設定

動画上に ドット / ボーダー / 斜線 のパターンフィルター、半透明のカラーフィルターをかけて動画の雰囲気を調整できます。フィルターをかけることで動画の粗さもカバーできます。

パターンフィルターをかける場合は「パターンフィルター設定」でパターンを選択して下さい。

カラーフィルターをかける場合は「カラーフィルター設定」でカラーフィルターの色を選択して下さい。

カラーフィルターの透明度を1〜5までの段階で設定できます。「カラーフィルター透明度」で透明度を調整して下さい。数字が大きいほどカラーフィルターが濃く表示されます。

動画エリア高さ設定

デフォルトでは動画の表示エリアのサイズを、開いているブラウザの高さに合わせて表示します。そのため開いているブラウザのサイズによって動画の両端が表示されない場合があります。

動画表示エリアのサイズをウィンドウではなく、動画のサイズに合わせて表示したい場合は「動画エリア高さ設定」にチェックを入れて下さい。

動画のサイズに合わせて表示すると動画の全体を表示するようになります。※Youtube 動画を設定されている場合は16：9（横：縦）の比率で表示します。

「変更を保存」ボタンをクリックでデザイン設定を完了します。

仕様

更新履歴と対応バージョン

リリース日	バージョン	対応するBizVektor	変更点など
2018.6.21	1.1.2	1.9.1以降	[ 機能追加 ] 管理画面からのワンクリックアップデートに対応 [ 不具合修正 ] 設定画面での保存時に意図しない空白が保存される不具合の修正 [ 仕様変更 ] モバイル端末での自動再生に対応(YouTube除く)、それに伴いWebサイトにアクセスした際に音声を初期設定でミュートに設定
2016.10.7	1.1.0	1.9.1以降	・モバイル表示での「セクションタイトル・テキスト　/ スクロールボタン / プレイボタン」のサイズを小さくしました。 ・モバイル表示時にセクション内の要素を個別に非表示にできる設定を追加しました。 ・動画へパターンフィルターをかける設定を追加しました。 ・動画表示エリアの高さを動画に合わせられる設定を追加しました。
2016.3.25	1.0.1	1.8.1以降	代替画像が表示できない場合がある不具合を修正
2016.3.16	1.0.0	1.8.1以降	初版リリース

※公式ディレクトリで配布されている BizVektor Global Edition では利用できません。本サイトで配布中の通常版をご利用下さい。