このガイドは、各種プレイヤータイプの実装方法と、実装時によくある質問（FAQ）をまとめたものです。
私たちのHTMLコードは、HTML/JavaScriptを扱うことができるあらゆるCMSで実装できます。各プレイヤータイプには、カスタマイズ可能な異なる動作と設定があります。
プレイヤーをカスタマイズする方法は2つあります。
1. 通常のCSS手法を使用する方法と、ウィジェットコード内に属性を追加する方法です。CSS手法は通常のウェブコーディングと同じです。プレイヤーにCSSの変数を適用する方法についての詳細は、こちらのページを参照してください。変更可能な変数は多数あり、この記事全体で説明します。
2. もう一つの方法は、コード内に属性を追加することです。最も一般的な使用例の一つは、サイト上のプレイヤーに表示される「Made In Firework」を削除することです。これには、スクリプト内に「branding=false」を追加する必要があります。
フローティングプレイヤー
フローティングプレイヤーは、サイト上の特定の配置場所を取らないため、実装が比較的簡単です。フローティングプレイヤーのコードは、実装したい特定のページの本文に配置する必要があります。
ランディングページや商品詳細ページに直接配置することをお勧めします
フローティングプレイヤーのFAQ
1. 左下のプレイヤーがチャット、クーポンなどを邪魔しています。位置を移動できますか？
* はい、できます！属性 player_placement を追加することで位置を移動できます。選択肢は「top-left」（左上）、「top-right」（右上）、「bottom-right」（右下）、または「bottom-left」（左下）です。これをスクリプト内に player_placement="top-left" のように記述します。
* フローティングプレイヤーをより細かく配置したい場合は、マージンを変更することができます。CSSコードを使用して設定できます。
* --fw-player-margin
* 例: --fw-player-margin: 16px 24px 32px 12px;
2. プレイヤーが大きすぎます。小さくできますか？
a. はい、できます！以下のcss変数を使用して設定できます：
--fw-player-height
--fw-player-width
3. お客様がプレイヤーを閉じた後、フローティングプレイヤーのあるページに戻ると再び表示されます。お客様がフローティングプレイヤーを閉じた場合に、再度表示されないようにする方法はありますか？
a. はい、この機能は実現可能です。イベントを監視し、クッキーを使用してイベントを確認し、プレイヤーを読み込むかどうかを決定する仕組みです。これは異なるCMSに固有のものであるため、カスタマーサクセスマネージャーにこの機能の実現を希望している旨をお知らせすることをお勧めします。開発チームと協力して実装を進めます。
ストーリーブロック
ストーリーブロックはいくつかの異なる方法で実装できます。重要なのは、ストーリーブロックがどのように動作するかを理解することです。ストーリーブロックを利用する重要な利点の一つは、ユーザーが全画面表示に移行せずに含まれているアクションと対話できることです。他のすべてのプレイヤータイプでは、ユーザーはまず動画をクリックし、その後アクション可能なオプション（商品をカートに追加する、コールトゥアクションをクリックする、ライブ配信に参加するなど）を利用できるようになります。もう一つの利点は、ストーリーブロックがモバイル体験に最適化されていることです。ほとんどの顧客では、ウェブトラフィックの大部分がモバイルからのものであるため、どのプレイヤーを使用するかを決める際の重要な要素となります。
デスクトップでのストーリーブロックの表示方法は2種類あります。1つ目の画像は、コンテナがページの幅に設定されたストーリーブロックの例です。2つ目の画像は、サイト上の特定の場所にあるコンテナの例です。
これはモバイル上でのストーリーブロックの見た目です。全画面表示にならなくても、特定のアクションのオプションが表示されることに注目してください。
ホームページやカテゴリーの商品ページの上部に直接配置することをお勧めします。
ストーリーブロックのFAQ
1. デスクトップビューの余白が気に入りません。余分なスペースを削除するにはどうすればよいですか？
a. 上記の例に示すように、ページ全体に広がらないコンテナを設定するだけです。コンテナのサイズを通常通り制御し、そのコンテナ内に私たちのコードを配置します。
2. フローティングプレイヤーは気に入っていますが、すぐに表示させたくありません。ストーリーブロックを見た後にのみ表示したいのですが、可能ですか？
a. プレイヤーがスクロールで画面外に出た後、画面に固定させることができます。スクリプト内に dock=true という属性を追加するだけです。
3. デスクトップ上のストーリーブロックの背景色を変更したいのですが、どうすればよいですか？
a. これは私たちのcss変数を使用して行います。ストーリーブロックの背景色を変更するためのcss変数は次のとおりです。
--fw-player-background
4. プレイヤーのフォントをカスタマイズしたいのですが、どうすればよいですか？
a. これは私たちのcss変数を使用して行います。フォントをカスタマイズするためのcss変数は次のとおりです。
--fw-font-family
カルーセル
カルーセルユニットは、さまざまな動画を表示し、ユーザーが動画をスクロールして見たい動画をクリックできるようにする優れた方法です。ストーリーブロックとカルーセルの主な違いは、ユーザーがアクション（ライブ配信に参加する、商品をクリックする、コールトゥアクションをクリックするなど）にアクセスするには、まず動画をクリックして全画面表示に移行する必要があることです。もう一つの注意点は、モバイルではユーザーは1つと1/3の動画しか見ることができないことです。カルーセルはページへの実装も比較的簡単です。以下はモバイルとデスクトップでのデフォルトのカルーセルユニットの例です。
ホームページやランディングページに配置することをお勧めします。
カルーセルのFAQ
1. プレイヤーのフォントをカスタマイズしたいのですが、どうすればよいですか？
a. これは私たちのcss変数を使用して行います。フォントをカスタマイズするためのcss変数は次のとおりです。
--fw-font-family
2. サムネイルのサイズと間隔をカスタマイズしたいのですが、可能ですか？
a. サムネイルのサイズを変更する一つの方法は、コード内で size=medium 属性を使用することです（オプションはmediumとlargeの2つのみです。デフォルトはlargeです）
b. さらにカスタマイズするには、CSSコードを利用します。変更できる要素の表は以下の通りです。サムネイルのサイズ、動画間の間隔、境界の丸み（ボーダーラディウス）を変更できます。