今回はClickFunnelsでビデオを埋め込んで、それをカスタマイズしていきます。
必ずテストを行う
- ブラウザとの相性を組み合わせでテストする
- AUTOPLAY
- BLOCK PAUSE
- デスクトップとモバイル
まず始めに一番大事なことをお伝えしておきます。このビデオを埋め込んでそれをページ上で再生する機能ですが、これには2つの大きな機能があります。一つが「AUTOPLAY」で、ページが読み込まれて自動的に再生してくれる機能です。もう一つが「BLOCK PAUSE」で、自動再生が始まった後にクリックでそのビデオを止められないようにする機能です。
この2つの機能はブラウザとの相性によってOn・Offをそれぞれ組み合わせて、例えば「AUTOPLAY」はOnにして「BLOCK PAUSE」をOffにしたり、両方ともOnにしたりという組み合わせでテストをする必要があります。
なぜならブラウザも日々アップデートされていて、勝手に「AUTOPLAY」で音が出るのを嫌うような仕様になっていたり、Google Chromeもどんどんアップグレードされているからです。その際は必ずデスクトップとモバイルの両方でテストをするようにしてください。デスクトップとモバイルの挙動はけっこう違うことがあるので、テストをして両方に合うような設定でビデオを埋め込んでほしいと思います。
Step1. ビデオを埋め込んでカスタマイズする
まずは「ADD NEW ELEMENT」をクリックして「VIDEO」を選択します。この要素をクリックしてカスタマイズしていきましょう。
- TOP MARGIN：他のエレメントと共通ですが、このエレメントの上の余白を調節することができます。
- VIDEO TYPE：いろいろな種類があり、私は「Vimeo」をお薦めしています。「YouTube」だと動画の再生が終わったときに関連動画が出てきてしまったりするので、離脱が起こったりブランディング的に不利なところがあります。「Wistia」は従量課金があったり導入が個人では難しい場合があり、「Vimeo」が一番バランスが良いと思うので今回は「Vimeo」で設定していきます。
- VIMEO URL：動画のURLを貼り付けます。VimeoのURLは例えば「https://vimeo.com/aaaaaa/bbbbbb」のように「https://vimeo.com/」の後ろに一つ目の「aaaaaa」があり、「/」で区切って二つ目の「bbbbbb」があるのですが、これを全部ここに貼り付けてしまうと動きません。これについてはどこにも書いていないのですが、いろいろと試した結果、この真ん中の「aaaaaa」の部分だけを「/」抜きの状態でコピーして貼り付けることで解決しました。実際はここが下図のように数字になっていたりします。同様にやってみてください。
- AUTOPLAY：「On」「Off」が切り替えられます。
- BLOCK PAUSE：「Yes」「No」が切り替えられます。「BLOCK PAUSE」に関してはデスクトップでしか機能しないと書いてあるのですが、モバイルでもこれが機能しているのを見たことがあるので、これはいろいろと試してみてください。
- UNMUTE LABEL：再生が始まった後に勝手に音が出ないようにミュートになっている動画がある場合、クリックすることで音が出るスピーカーのアイコンのようなものを出すかどうかを選択するものです。これも「Auto PlayがOnでBlock PauseがNoのときだけ働きます」と書いてあるので、こういう条件をよく読んで設定してください。
- OPTIONAL WIDTH：動画の横サイズを設定できます。
- OPTIONAL HEIGHT：動画の縦サイズを設定できます。
- OVERLAY TEXT：これには条件があって、Block PauseがOnになっているときだけしかできないと書いてあります。「Text to display on video overlay.」ということで、これはプレビューして見てみましょう。「BLOCK PAUSE」を「Yes」にして「AUTOPLAY」も「On」にしておきます。これでセーブしてプレビューしてみます。今は何も動画の設定をしていないので、デフォルトの動画が出ています。「Click To Join Session In Progess…」と出てくるので、これをクリックすると音が出てくるという感じです。
- TITLE：HTMLのビデオの要素の中に入るようなタイトルになります。
- BG COLOR：余白などを出したときにバックグラウンドカラーが出てきます。これも後で見てみましょう。
Step2. THEMESタブを設定する
次はTHEMESタブです。テーマに関してはいろいろなデザインがあらかじめ用意されていて、枠を付けるようなものが多いです。例えば黒にしてシンプルにすることもできます。
Step3. ADVANCEDタブを設定する
次はADVANCEDタブです。
- STYLESタブの「WIDTH」で動画のサイズを変更できます。今は一番大きいサイズの「Full Width」になっています。「3/4 Width」や「Half Width」に変えることができます。
- STICKY ON SCROLL：プレビューして見てみましょう。これは動画をスクロールしたときに右上にずっと付いてくるビデオのことです。Sticky Videoの設定に関しては他の動画で詳しく解説しているので、そちらを参考にしてください。今は「Off」に設定します。
- PADDING：ビデオの周りの余白部分の設定ができます。
- ANIMATIONタブのTIMED DELAYなど：他の要素とほぼ共通していて、「Fade in Width Scale」でスケールしながらフェードインさせたり、「MINUTES」と「SECONDS」でページを読み込んでからフェードインで表示する時間差を設定できます。
- TYPE：上のTIMED DELAYなどと似たような感じですが、ページをロードしてからどのくらいの時間差でフェードインさせるか、またはページのスクロールでエレメントの場所に達した後にどのくらいの時間差でフェードインさせるかなど、いろいろな効果を設定することができます。ビデオに関しては以上です。