動画ポップアップブロックを使用すると、SeedProdの任意のページにYouTube、Vimeo、または自己ホスト型のソースからの動画コンテンツを埋め込むことができます。標準の埋め込みプレーヤーとは異なり、このブロックはライトボックスモード、訪問者がスクロールしても追従するスティッキー動画、カスタムサムネイルとして機能する画像オーバーレイをサポートしており、訪問者が動画を発見し、インタラクションする方法を完全に制御できます。
製品デモ、お客様の声、解説動画のいずれを公開する場合でも、動画ポップアップブロックは、自動再生、ミュート、ループ、プライバシーモード、ティーザー動画機能などの高度な再生オプションを提供し、ページの目標や視聴者の好みに合わせて視聴体験を調整できます。
ページに動画ポップアップブロックを追加する
次の手順に従って、SeedProdページに動画ポップアップブロックを追加してください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、動画ポップアップブロックをページの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、動画ポップアップブロックをクリックして設定を開きます。コンテンツタブの設定は、4つのセクションに整理されています。
動画:
- ソース: 動画ソースを選択します — YouTube、Vimeo、またはカスタム（自己ホスト型または外部ホスト型動画ファイルの場合）。
- YouTube URL（YouTubeのみ）: YouTube動画の完全なURLを入力します。
- Vimeo URL（Vimeoのみ）: Vimeo動画の完全なURLを入力します。注意: スティッキー動画には、Starter、Standard、Advanced、Plus、Pro、Business、Premium、またはEnterpriseの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。
- 配置: 動画プレーヤーの水平方向の配置を設定します — 左、中央、右 — デスクトップ、タブレット、モバイルごとにデバイス別のコントロールがあります。
- 影: 事前定義されたサイズ — なし、ヘアライン、小、中、大、特大、または特大 — を使用して、動画プレーヤーにボックスシャドウを適用します。
間隔：
- マージン: ブロックの外側のスペーシングを4つの側面すべてに設定します。デスクトップ、タブレット、モバイルで個別に制御できます。
- パディング: ブロックラッパーの内側のスペーシングを4つの側面すべてに設定します。デバイスごとに制御できます。
属性:
- カスタムクラス: ブロックラッパーに1つ以上のカスタムCSSクラスを追加して、ターゲットを絞ったスタイリングを行います。
- CSS ID: SeedProdは、このブロックに一意のCSS IDを自動的に生成します。カスタムCSSまたはJavaScriptでブロックを参照するために使用できます。
- カスタム属性: ブロックラッパー要素にカスタムHTML属性を追加します。キー|値の形式で、各属性を新しい行に入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で表示されたときにブロックを非表示にするには、トグルします。
- タブレットで非表示: タブレット画面で表示されたときにブロックを非表示にするには、トグルします。
- モバイルで非表示: モバイル画面で表示されたときにブロックを非表示にするには、トグルします。
アニメーション効果:
- スクロールエフェクト: ブロックにスクロールでトリガーされるアニメーションを適用します。方向、速度、ビューポートオフセット制御を備えた垂直スクロールおよび水平スクロールオプションが含まれます。
- マウスエフェクト: マウスの動きによって駆動されるパララックス効果をブロックに適用します。
ステップ4：変更を保存
Video Pop Upブロックの設定が完了し、外観のカスタマイズが終わったら、必ず作業内容を保存してください。
これで、ページにVideo Pop Upブロックが正常に追加されました。YouTube、Vimeo、セルフホスト型ビデオのサポートに加え、画像オーバーレイ、ティーザープレビュー、スティッキー再生、ライトボックスモードにより、このブロックは魅力的なビデオ体験を作成するために必要なすべてを提供します。再生オプションとオーバーレイ設定を試して、訪問者の注意を最もよく引き付ける組み合わせを見つけてください。