「動画全面」ユニットは、利用の簡便さを考慮して、動画配信サービス「YouTube」のAPIを利用しています。
表示にはjQueryライブラリ「YTPlayer」を使用しています。
https://pupunzi.com/mb.components/mb.YTPlayer/demo/demo.html
このユニットにはいくつかの利用上の制限があります。
スマートフォンでの制限
このテーマでは、OSがモバイル端末の場合は、動画を再生しません。YTPlayerを使用すれば制限なく再生することも可能ですが、自動再生は静止画と比較して通信量を多く消費し、かつ背景では利用者が任意で静止できない等の問題が発生するための対応です。
再生回数
YouTube Data APIでは、無料で使用できるデータ量が制限されています。
詳細は、下記URLを参考ください。
https://developers.google.com/youtube/v3/getting-started?hl=ja
動画一件の再生で消費されるクォータコストはごくわずかのため、極端にアクセスが多いサイトで大量の動画を表示したりしない限り、無料枠が制限される可能性は低いです。
表示の際の待ち時間
YouTube Data APIで動画を再生する場合、技術的には内部で以下のような処理を行っています（これはTwitter、Facebook、Instagramも同様の流れです）。
- APIキーが正しいものか確認する
- 指定した動画を表示するためのインラインフレームを生成する
- 生成されたインラインフレームが動画をリクエストする
- 動画の読み込みが完了次第再生する
このとき、3と4の間に数秒のタイムラグが発生します。時間はYouTubeのサーバーの状態や通信状況に左右されますが、少なくともランディングページの表示完了よりも数秒遅くなり、この間動画全面ユニットの背景は真っ白、もしくは真っ黒になります。
この問題を回避しつつ、メインビジュアルに動画全面ユニットを使用したい場合は、以下のカスタマイズを検討してください。
背景に代替画像を表示する
CSSでユニットの背景の白、もしくは黒の要素に代替画像を表示させます。
ページ全体をマスクする
インラインフレームの読み込み終了をYTPlayer、もしくはAPIで検知し、それまでの間ページ全体が見えないようにマスクします。
動画をメインビジュアルに使用することについて
マーケティング的なお話になりますが、表示の待ち時間などを考えた場合、高画質の静止画の方がファーストビューとして効果的な場合もあります。メインビジュアルへの動画利用は、サイト訪問者に対して訴求できるコンテンツであるか、表示の待ち時間やSEO的なことも考えてご判断ください。
動画をメインビジュアルに利用したい場合、YouTubeではなくサーバー内に動画を設置してmovie要素で表示した方が安定します。