SeedProd ドキュメント

SeedProd のドキュメント、リファレンスマテリアル、チュートリアル

ビデオブロック

ビデオブロックを使用すると、SeedProdの任意のページに直接ビデオコンテンツを埋め込むことができます。YouTubeビデオはURLを使用して埋め込むか、Vimeo、Wistiaなどを含む任意のプラットフォームからカスタム埋め込みコードを貼り付けることができます。これにより、コンテンツが存在するビデオホストを自由に選択できます。

ビデオは、ランディングページでのエンゲージメントとコンバージョンを高めるための最も効果的なツールの1つです。このブロックを使用して、製品デモ、お客様の声、説明ビデオ、またはストーリーを伝え、訪問者をより長くページに留めるのに役立つあらゆるマルチメディアコンテンツを紹介してください。

要件: ビデオブロックは、すべての ライセンスプランで利用可能です。


ページにビデオブロックを追加する

次の手順に従って、SeedProdページにビデオブロックを追加します。

ステップ1:ブロックを追加する

デザイン > ブロックの下で、ビデオブロックをページの目的のセクションにドラッグアンドドロップします。

SeedProdページにビデオブロックをドラッグする

ステップ2:コンテンツ設定を構成する

追加したら、ビデオブロックをクリックして設定を開きます。コンテンツタブのビデオセクションの下に、次のオプションがあります。

  • タイプ: URLでビデオを埋め込む場合はYouTube、Vimeo、Wistiaなどのビデオプラットフォームから埋め込みコードを貼り付ける場合はカスタムを選択します。
  • YouTube URL (YouTubeタイプのみ): 埋め込みたいYouTubeビデオの完全なURLを入力します (例: https://www.youtube.com/watch?v=MUXoqm3VpRo)。
  • カスタムビデオコード (カスタムタイプのみ): ビデオホスティングプラットフォームによって提供される完全なiframe埋め込みコードを貼り付けます。
  • 幅: スライダーを使用して、コンテナのパーセンテージとしてビデオプレーヤーの幅を設定します (デフォルト: 100%)。
  • 配置: 動画プレーヤーの水平方向の配置を設定します — 左、中央、右 — デスクトップ、タブレット、モバイルごとにデバイス別のコントロールがあります。
YouTubeタイプとURLフィールド、幅、配置設定が表示されたビデオブロックのコンテンツタブ
カスタムタイプと埋め込みコードフィールドが表示されたビデオブロックのコンテンツタブ

ステップ3:デザインをカスタマイズする

高度な設定タブでは、ビデオブロックの視覚的な外観をカスタマイズできます。

スタイル:

  • 影: 事前定義されたサイズ — なし、ヘアライン、小、中、大、特大、または特大 — を使用して、動画プレーヤーにボックスシャドウを適用します。

間隔:

  • マージン: ブロックの外側のスペーシングを4つの側面すべてに設定します。デスクトップ、タブレット、モバイルで個別に制御できます。
  • パディング: ブロックラッパーの内側のスペーシングを4つの側面すべてに設定します。デバイスごとに制御できます。

属性:

  • カスタムクラス: ブロックラッパーに1つ以上のカスタムCSSクラスを追加して、ターゲットを絞ったスタイリングを行います。
  • CSS ID: SeedProdは、このブロックに一意のCSS IDを自動的に生成します。カスタムCSSまたはJavaScriptでブロックを参照するために使用できます。
  • カスタム属性: ブロックラッパー要素にカスタムHTML属性を追加します。キー|値の形式で、各属性を新しい行に入力します。

デバイス表示:

  • デスクトップで非表示: デスクトップ画面で表示されたときにブロックを非表示にするには、トグルします。
  • タブレットで非表示: タブレット画面で表示されたときにブロックを非表示にするには、トグルします。
  • モバイルで非表示: モバイル画面で表示されたときにブロックを非表示にするには、トグルします。

アニメーション効果:

  • スクロールエフェクト: ブロックにスクロールでトリガーされるアニメーションを適用します。方向、速度、ビューポートオフセット制御を備えた垂直スクロールおよび水平スクロールオプションが含まれます。
  • マウスエフェクト: マウスの動きによって駆動されるパララックス効果をブロックに適用します。
スタイル、スペーシング、属性、デバイスの可視性、アニメーション効果が表示されたビデオブロックの高度な設定タブ

ステップ4:変更を保存

ビデオブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。


これで、ビデオブロックをページに正常に追加できました。YouTubeビデオを埋め込む場合でも、他のプラットフォームからのカスタムプレーヤーを埋め込む場合でも、ビデオコンテンツはメッセージを伝え、ページ滞在時間を増やすための強力な方法です。幅、配置、影の設定を使用して、ビデオを任意のページレイアウトにシームレスに統合してください。

関連記事