ウェブサイトへのプレイリスト埋め込み

シンプルなHTMLタグを使用して、Fireworkのプレイリストをウェブサイトやウェブページにショート動画として埋め込むことができます。以下の手順に従って設定し、各種レイアウトオプションをご確認ください。

プレイリストの埋め込み方法

ステップ1

Fireworkビジネスポータルにログインします。

ステップ2

埋め込みたいプレイリストに移動します。

ステップ3

選択したプレイリストの横にある「サイトに追加」ボタンをクリックします。

ステップ4

各種レイアウトオプションから選択します。

ステップ5

「コードをコピー」をクリックして埋め込みHTMLを生成します。

ステップ6

プレイリストを表示したいウェブページにコードを貼り付けます。

ステップ7

プレビューセクションを使って、埋め込む前に選択したレイアウトの表示を確認できます。

ステップ8

タイトルの表示 – ウィジェットにタイトルを追加できます。追加するとHTMLコードにも自動で含まれます。

注意：player_captionsを拡張して埋め込みメニュータイトルの表示/非表示を切り替えることができます。player_captionsを非表示にするとメニュービューのイベント/動画タイトルも非表示になります。player_captions = falseの場合、キャプションとタイトルの両方が非表示になります。

プレイリストのレイアウトオプション

ストーリーブロック

一度に1本の動画を表示する静的なコンテンツブロックです。1本が終わると次の動画が自動的に再生されます。

• スクロール可能・非フローティング
• ストーリーブロックのカスタマイズ詳細はこちら（背景オプションやレイアウト調整を含む）
• 透明な背景を設定するには、埋め込みコードに追加の行を加えます

フローティングプレイヤー

ユーザーがスクロールしても画面の隅に固定表示される小型の動画プレイヤーです。

• 通常はサイトのヘッダーまたはボディに配置
• 継続再生のためのピクチャーインピクチャーモードに対応
• ブラウジングを妨げずに動画コンテンツを表示し続けるのに最適

グリッド

グリッドレイアウトで動画を表示します。任意の動画をクリックすると大きなプレイヤーに展開されます。最小化するとプレイヤーは画面の隅に浮かびます。

• 展開ビュー内でプレイリストを左右にスクロール可能
• フローティング位置を選択可能（例：bottom-right）

カルーセル

固定された動画が左右にスクロールします。動画を選択すると動画プレイヤーが拡大されます。最小化すると画面の隅にフローティング表示されます。

• size="small"またはsize="medium"でサイズ調整可能
• 動画を選択するとオーバーレイ表示が起動
• ホームページへの埋め込みや商品カテゴリページに最適

小サイズ・中サイズカルーセル

HTMLコードにsize="small"またはsize="medium"を追加することでカルーセルのサイズを調整できます。

<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"
size ="small"
player_placement="bottom-right"
></fw-embed-feed>

拡大CTAサポート

カルーセルまたはグリッドレイアウトにボタンインタラクションを組み合わせると、自動再生中に動画ポスター上に拡大CTAが表示され、エンゲージメントとクリックを促進します。リンク

ヒーローユニット

主にライブストリームコンテンツ向けのインパクトのあるフルスクリーンレイアウトです。左側にストーリーブロック、右側にインタラクティブなテキストとCTAを配置します。

• 告知やキャンペーンに最適なハイインパクトデザイン
• ヒーローユニットの有効化方法はこちら

プレイヤーデッキ

パフォーマンスとコンバージョンに最適化されたレイアウトです。すべての動画を目立つように表示し、ユーザーをPDP（商品詳細ページ）へ素早く誘導します。

• ショート動画のショッピング体験に最適
• 新しいプレイヤーデッキをウェブサイトに埋め込めます

水平プレイヤー

水平表示を有効化します。ヒーローユニットまたはフル幅動画として1本の動画を水平ビデオプレイヤーで表示できます。

水平カルーセル

複数の水平動画を横並びに表示するレイアウトです。ワイドスクリーンの視覚的体験を提供します。

ダイナミックカルーセル

カルーセルプレイリストの革新的な表示方法で、インタラクションできるカードを表示します。各動画は静的ポスターとして表示され、クリックして詳細を確認できます。

円形ストーリーズ埋め込み

Instagramストーリーズ風の円形レイアウトで、ビジュアルなストーリーテリングに最適です。CMSとShopify埋め込みアプリの両方で利用できます。

主な機能：

• オプションのパルスアニメーション付き円形サムネイル
• 自動再生サポート：初期再生の有効/無効（autoplay=true/false）
• パルスアニメーションのカスタマイズ：
  • pulse_animation=falseで無効化
  • CSSでカラーをカスタマイズ：--fw-thumbnail-pulse-animation-color
• サムネイルサイズ：small、medium、large
• 重なりを防ぐためサイズに応じてレイアウト間隔が動的に調整

アクセシビリティの注意：デバイスで「モーションを減らす」を有効にしているユーザーにはパルスアニメーションは表示されませんが、間隔は維持されます。

縦型ストーリーズ埋め込み

縦型の向きと長方形のサムネイルを持つ縦積みレイアウトです。円形ストーリーズ埋め込みと機能は同一で、縦型の向きと長方形のサムネイルのみ異なります。