Webページにプレイリストを埋め込む

ウェブサイトにプレイリストを埋め込むためのHTMLタグの生成方法について説明します

Web サイトにビデオコンテンツを追加する準備ができたら、簡単にコピーして貼り付けることができるHTMLコードタグを生成します。ページ上のコンテンツを配置する場所を特定し、選択したコンテンツブロックにコードを貼り付けます。

Webページにビデオを埋め込むには:

1. 管理画面で、追加するプレイリストをクリックします
2. ページの右上隅にある「サイトに追加」ボタンをクリックします。
3. プレイリストのレイアウトを選択します。 9つの異なるプレイリストレイアウトから選択できます。
   

   

4. 「コードをコピー」ボタンをクリックします。
5. HTMLコードを貼り付けてWebページに埋め込みます。

9つのレイアウトの選択

ストーリーブロック: これは静的なコンテンツブロックです。Web ページの一部に 1 つのビデオが表示され、スクロールして通り過ぎることができます。 1 つのビデオが完了すると、プレイリスト内の次のビデオが再生されます。コード行を追加して、背景を透明にカスタマイズします。

フローティングプレーヤー: これはページの右下隅にある小さなビデオ画面で、ユーザーがスクロールするとページとともにフローティングします。 Web ページの他の場所をクリックすると、プレイリストビデオがピクチャインピクチャ ビューに戻ります。

グリッド: ビデオをクリックしてプレーヤーを拡大し、ユーザーがプレイリスト内のビデオを左右にスクロールできるようにします。最小化すると、ビデオプレーヤーは画面の隅に浮かび上がります。ビデオをどのコーナーにフローティングするかを選択できます。

カルーセル: ビデオを選択すると、ビデオプレーヤーが拡大されます。最小化すると、ビデオプレーヤーは画面の隅に浮き上がります。ビデオをどのコーナーにフローティングするかを選択できます。

カルーセルのサイズ調整：小型カルーセルの場合はsize="small"、中型カルーセルの場合はsize="medium"という属性をHTMLコードに直接組み込むことで、カルーセルのサイズを小型または中型に調整することができます。

<script async type="text/javascript" src="//asset.fwcdn3.com/js/embed-feed.js"></script>

    <fw-embed-feed
      channel="firework_depot"
      playlist="oe8bX5"
      mode="row"
      open_in="default"
      max_videos="0"
      placement="middle"
      attribute size ="small"
      player_placement="bottom-right"                                         
    ></fw-embed-feed>

拡大CTA： カルーサルまたはグリッドレイアウトオプションをオーバーレイオプションで利用する場合、自動再生中されているビデオ上に表示されます。

ヒーローユニット: ※ライブ配信を含むプレイリストにのみ適用されます。ヒーローユニットは、画面左側にストーリーブロック、右側にCTAを含むインタラクティブなテキストを配置するフルスクリーン表示です。このライブストリーム固有のレイアウトについての詳細は、「ヒーローユニットを有効にする」を参照してください。

Player Deck(プレイヤーデッキ）: 商品を動画内に目立つように表示し、ユーザーを商品詳細ページ（PDP）へ効率的に早く誘導することで、コンバージョン率を高めることを目的としています。

Horizontal Player（横型プレイヤー）:1つの横型動画を画面に大きく表示できます

 Horizontal Carousel （横型カルーセル):このレイアウトでは、複数の横型の動画を並んで表示することができます。

Dynamic Carousel （ダイナミックカルーセル):カルーセルプレイリストの表示に革新的なアプローチを導入し、このレイアウトではインタラクション可能なカードの表示が可能です。各動画は静的なポスターとして表示され、ユーザーがさらに詳しく探索できるクリック可能なオプションを提供します。