Videos

商品コード: popup-maker-videos カテゴリー:

Videos アドオンは、Popup Maker プラグインで作成できるポップアップ画面に、YouTubeなどの動画コンテンツを再生する機能を追加できます。

ポップアップで動画を再生

Videos アドオンは、YoutubeやVimeoなど動画コンテンツを配信するサービスなどを設定して、Popup Maker プラグインで作成できるポップアップ画面に動画を再生する機能を追加します。

ポップアップ画面を表示させるトリガーや条件は、Popup Maker プラグインや、その他のアドオンと同じ機能を利用できるので、

クリックや所定の時間経過の他にも、スクロール量やページ内の特定の要素が表示されたタイミングなど、利用者にとって理想的なタイミングで動画を表示して再生させることができます。

動画の再生方法も自由自在

ポップアップ設定内の [動画] 設定により、ポップアップ画面が表示された際に自動再生させたり、動画が終了した際にポップアップ画面を自動で閉じるなどのポップアップ画面で再生される動画について様々なオプション設定を追加することができます。

動画埋め込みによるサイトの表示速度も問題なし

ポップアップ画面に埋め込まれた動画ファイルは、ページの読み込み時の際には読み込まれずに、ポップアップ表示後に、読み込まれるため、大きなサイズの動画を利用した場合でも、ページの読み込み時間に問題が起こることはありません。

Videos アドオンは、Popup Maker プラグインで作成したポップアップ画面で動画を再生する機能を追加することができます。

ポップアップ画面の編集画面に、YouTube や Vimeo のURLを貼り付けるだけで、手軽に動画を再生するコンテンツを作成が可能になっています。

また、再生される動画コンテンツは「自動再生」や「終了時に画面を閉じる」、「レジューム再生」などの様々なオプション設定を追加することができます。

Videosの使い方

ポップアップに動画を設置する方法

動画を再生するポップアップ画面は、次の手順で作成することができます。

  1. 管理画面の [Popup Maker] メニューの [ポップアップを作成] をクリックします。
    ポップアップに動画を設置する方法
  2. 表示された [新しいポップアップを作成] 画面で、[ポップアップの名前] に後で分かりやすい名前を入力します。
  3. コンテンツの入力画面に、動画ファイルへのURL(YouTube など)を貼り付けます。
    ポップアップに動画を設置する方法
  4. ブロックエディタを使う場合には、ブロックの追加操作で [YouTube] ブロックを選択します。
    ポップアップに動画を設置する方法
  5. ポップアップ画面に動画が追加されます。
    ポップアップに動画を設置する方法
  6. [ポップアップ設定] 画面の [新しいトリガーを追加] をクリックします。
    ポップアップに動画を設置する方法
  7. 表示された [どのタイプのトリガーを追加しますか?] 画面の一覧から [自動表示/経過時間] を選択して [追加] ボタンをクリックします。
    ポップアップに動画を設置する方法
  8. [待機時間の設定] 画面で [追加] ボタンをクリックします。
    ポップアップに動画を設置する方法
  9. [ポップアップ設定] 内の [動画] > [ポップアップが開いたらビデオを開始します] にチェックを入れます。
    ポップアップに動画を設置する方法
  10. [公開] ボタンをクリックして、ポップアップ画面を保存します。
  11. 投稿のプレビューを表示すると、ページが表示された後に、ポップアップ画面が表示され動画が再生されます。
    ポップアップに動画を設置する方法

動画ポップアップの設定

Videos アドオンを使って動画を再生するポップアップ画面は [ビデオ] 設定で再生や巻き戻しなどの動作の変更を行うことができます。

動画ポップアップの設定

[ポップアップが開いたら動画を開始します]:画面が表示されたタイミングで動画が自動再生されます。(既定値オフ)
[動画の再生が開始されると、自動的に全画面表示になります]:動画の再生時に自動で全画面表示にします。(既定値オフ)
[動画が終了したらポップアップを閉じます]:動画の終了時にポップアップ画面を自動で非表示にします。(既定値オフ)
[ポップアップが開いた時]:画面が表示された場合の動画の状態を、再開、最初から、特定の時間から選びます。(既定値は再開)
[ポップアップが閉じた時]:画面が非表示になった場合に動画の状態を、一時停止、停止から選びます。(既定値は一時停止)

動画のクッキー設定

Videos アドオンを使って再生した動画の再生状態をクッキーに保存しておくことができます。

クッキーに保存された内容を使って、過去に同じポップアップ画面で動画が再生されている場合には前回、一時停止した場所から続きが再生が開始させることができます。

動画がの再生状態をクッキーに保存するには、次の手順で行います。

  1. [ポップアップ設定] 画面の [新しいクッキーを追加] をクリックします。
    動画のクッキー設定
  2. 表示された [いつクッキーを作成しますか?] 画面の一覧から [動画を一時停止した時] を選択して [追加] ボタンをクリックします。
    動画のクッキー設定
  3. [クッキーの設定] 画面で保存されるクッキーの有効期限(既定値は1ヶ月)を入力して [更新] ボタンをクリックします。
    動画のクッキー設定

この設定でポップアップ画面内で動画が一時停止した際にクッキーが作成されるようになり、有効期限の間に埋め込まれた動画が再生された場合に続きから再生されるようになります。

また、アドオンによって [いつクッキーを作成しますか?] 画面に次のような一覧が追加されます。

[動画が再生された時]:動画が再生された際にクッキーが作成され、一度再生開始されたものを再度表示しない場合などに使用します。
[動画を一時停止した時]:再生された動画が一時停止した際にクッキーが作成され、次回ポップアップ画面が表示された際に続きが表示されるようになります。
[動画が終了した時]:再生された動画が終了した際にクッキーが作成され、一度動画を最後まで再生されたポップアップを再度表示しない場合などに使用します。

他のクッキーと同様に有効期間を設定できるため、例えば [動画の一時停止した時] のクッキーの有効期限が ”1month” に設定されている場合には、動画が途中で停止してから1か月経過後に再表示された場合には、動画は最初から再生されます。