ビデオポップアップブロックを使用すると、YouTube、Vimeo、または自社ホストのソースから動画コンテンツをSeedProdの任意のページに埋め込むことができます。標準の埋め込みプレイヤーとは異なり、このブロックはライトボックスモード、スクロール時に訪問者に追従する固定動画、カスタムサムネイルとして機能する画像オーバーレイをサポートしており、訪問者が動画を発見し、インタラクションする方法について完全な制御を提供します。
製品デモ、お客様の声、解説動画のいずれを掲載する場合でも、ビデオポップアップブロックは高度な再生オプションを提供します。自動再生、ミュート、ループ再生、プライバシーモード、ティーザー動画機能などにより、ページの目的や視聴者の好みに合わせて視聴体験をカスタマイズできます。
ページに動画ポップアップブロックを追加する
SeedProdページにビデオポップアップブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン ＞ ブロック の下にある「ビデオポップアップ」ブロックを、ページの目的のセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、ビデオポップアップブロックをクリックして設定を開きます。コンテンツタブでは、設定が4つのセクションに整理されています。
動画：
- 動画ソースを選択してください— YouTube、Vimeo、またはカスタム（自己ホストまたは外部ホストの動画ファイル用）。
- YouTube URL（YouTubeのみ）：YouTube動画の完全なURLを入力してください。
- Vimeo URL（Vimeoのみ）：Vimeo動画の完全なURLを入力してください。注：スティッキー動画機能には、Vimeoのスターター、スタンダード、アドバンスト、プラス、プロ、ビジネス、プレミアム、またはエンタープライズアカウントが必要です。
- 外部URL / カスタム動画URL（カスタムのみ）：外部URLを切り替えてホストされた動画ファイルにリンクするか、動画の直接URLを入力します。また「カスタム動画を選択」を使用してメディアライブラリからファイルを選択することもできます。
- 開始時間:動画の再生を開始する時刻（秒単位）を指定します。
- 終了時間:動画の再生を停止する時間（秒単位）を指定します。
ビデオオプション：
- 自動再生：ページ読み込み時に動画を自動的に開始します。
- モバイルで再生:モバイル端末では動画を自動的に全画面モードにせず、インラインで再生します。
- ミュート：訪問者の体験を妨げないよう、動画をミュート状態で開始します。
- ループ：動画の終わりに到達したら、継続的にループ再生します。
- プレイヤーコントロールを表示：動画プレイヤーの再生コントロールを表示または非表示にします。
- プライバシーモード：有効にすると、YouTubeとVimeoは、動画が実際に再生されない限り、訪問者情報を保存しません。
- 遅延読み込み：動画がビューポート内で表示可能になるまで読み込みを遅延させ、ページの読み込み速度を向上させます。
- イントロタイトル / イントロポートレート / イントロ署名（Vimeoのみ）：Vimeoイントロに表示される動画タイトル、作者ポートレート、作者署名の表示を切り替えます。
- コントロールの色（Vimeoのみ）：Vimeoプレイヤーのコントロールの色を設定します。
- おすすめ動画（YouTubeのみ）：動画終了後に表示される内容を選択してください —現在の動画チャンネル（同じチャンネルの関連動画）または任意の動画。
- ダウンロードボタンを表示（カスタムのみ）：カスタム動画プレーヤーにダウンロードボタンを表示します。
- プリロード（カスタムのみ）：ページ読み込み時の動画の読み込み方法を設定します —メタデータ（動画情報のみを読み込む）、自動（動画全体を読み込む）、またはなし。
- ポスター:動画の再生開始前に表示されるポスター画像を設定します。
- スティッキー動画を有効にする：有効にすると、訪問者が動画をスクロールで通り過ぎても、動画プレイヤーが画面の隅に固定され、ページ全体を通して動画が表示されたままになります。
ティーザー動画：
- ティーザー動画を有効化:静的なサムネイルを、ページ上で無音でループ再生される短いティーザー動画に置き換えます。訪問者がクリックすると、フル動画が開きます。注: このオプションを有効にすると、画像オーバーレイ機能は無効になります。
- ティーザー動画再生アイコン：ティーザー動画上に表示され、クリック可能であることを示すアイコンを選択してください。
- アイコンのフォントサイズ：ティーザー再生アイコンのサイズを設定します。
- バナーを表示：ティーザー動画の上にバナーを表示します（例：「クリックして音声を聞く」プロンプト）。バナーのテキスト、背景色、文字色、書体、アイコンを設定します。
画像オーバーレイ:
- 画像オーバーレイを有効にする：デフォルトの動画サムネイルをカスタム画像に置き換えます。訪問者は画像をクリックして動画を開きます。注：このオプションを有効にすると、ティーザー動画機能が無効になります。
- 画像を選択:メディアライブラリからオーバーレイ画像を選択またはアップロードしてください。
- 画像サイズ:オーバーレイ画像の幅と高さをピクセル単位またはパーセンテージで設定します。
- 再生アイコンを表示:オーバーレイ画像上に表示される再生アイコンの表示/非表示を切り替えます。
- アイコンのフォントサイズ:オーバーレイ画像に表示される再生アイコンのサイズを設定します。
- アイコンの不透明度：再生アイコンの透明度を設定します（0～10のスケール）。
- アイコンの色:オーバーレイ画像上の再生アイコンの色を設定します。
- ライトボックスを有効にする:有効にすると、オーバーレイ画像をクリックすると、動画をインラインで再生する代わりにライトボックスオーバーレイで表示します。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、ビデオポップアップブロックの外観をカスタマイズできます。
スタイル:
- 幅:スライダーを使用して、ビデオプレーヤーの幅をコンテナの幅に対するパーセンテージで設定します。
- アスペクト比:ビデオプレーヤーのアスペクト比を選択します — 1:1、3:2、4:3、9:16、16:9、または21:9。
- 配置:ビデオプレーヤーの水平方向の配置を設定します — 左、中央、または右 — デスクトップ、タブレット、モバイルごとに個別の制御が可能です。
- シャドウ：ビデオプレーヤーにボックスシャドウを適用します。プリセットサイズ（なし、ヘアライン、小、中、大、特大、2倍大）から選択してください。
スペース:
- 余白：ブロックの周囲の四辺の外側の間隔を設定します。デスクトップ、タブレット、モバイルそれぞれで独立して制御できます。
- パディング：ブロックラッパー内の四辺すべてに内側の間隔を設定し、デバイスごとの制御を行います。
属性：
- カスタムクラス:ブロックラッパーに1つ以上のカスタムCSSクラスを追加し、対象を絞ったスタイル設定を行います。
- CSS ID:SeedProdはこのブロックに対して一意のCSS IDを自動生成します。カスタムCSSやJavaScriptでブロックを参照する際に使用できます。
- カスタム属性:ブロックラッパー要素にカスタムHTML属性を追加します。各属性をキー|値形式で改行して入力してください。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面で表示した際にブロックを非表示にするか切り替えます。
- タブレットで非表示:タブレット画面で表示時にブロックを非表示にするか切り替えます。
- モバイルで非表示:モバイル画面で表示される際にこのブロックを非表示にするか切り替えます。
アニメーション効果：
- スクロール効果：ブロックにスクロール連動アニメーションを適用します。垂直スクロールと水平スクロールのオプションを含み、方向、速度、ビューポートオフセットを制御できます。
- マウス効果：ブロックにマウスの動きに基づく視差効果を適用します。
ステップ4: 変更を保存する
ビデオポップアップブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページにビデオポップアップブロックを追加できました！YouTube、Vimeo、自社ホスト動画に対応し、画像オーバーレイ、ティーザープレビュー、固定再生、ライトボックスモードを備えたこのブロックで、魅力的な動画体験をすべて実現できます。再生オプションとオーバーレイ設定を試し、訪問者の注目を集める最適な組み合わせを見つけてください。