［商品情報］動画設定

「商品画像パーツに動画を表示する」にチェックすると、「商品詳細」画面の商品画像が表示されるエリア（商品画像パーツ）に動画を含めて表示することができます。

画像と動画はカルーセルにて表示されます。

＜商品動画が表示可能な条件＞

「商品詳細」画面において、以下のパーツをご利用の場合に限ります。

• 「商品画像パーツ」
• 「商品画像パーツ・フリック」

※「商品画像繰り返しパーツ」をご利用の場合は表示されません。

iframeによる埋め込み

iframeによる埋め込みで、外部サービスにアップロードした動画を表示したい場合に選択します。
例えば、YouTubeやVimeoなどの動画共有サービスが、iframeによる埋め込みをサポートしています。

サーバに負荷をかけずに表示を行うことができます。
ただし外部サービスで動画を削除したり、タグが変更されるような操作を行った場合には、動画が表示されなくなるのでご注意ください。

「埋め込みタグ」欄に、各サービスから取得した埋め込みタグを登録してください。 必須 半角：32,000文字

＜ご利用可能サービス＞

• YouTube
• Vimeo
• TikTok

＜ご利用いただけないサービス＞

• instagram

タグの埋め込みにはご留意いただきたい点がございます。必ず動画サービス埋め込みタグご利用時のご留意事項をご覧ください。

videoタグによる埋め込み

アップロードした動画ファイル（mp4・webm・oggなど）を読み込んで表示したい場合に選択します。
動画のURLを入力するだけで、表示が可能です。また自動再生なども指定できます。

「動画URL」欄に、動画のURLを入力してください。 必須 半角（URL形式）：1000文字

＜ご注意事項＞

• http:// https://を含めて入力してください。
• アイテムボックスのURLは入力できません（アイテムボックスに動画をアップロードはしないでください）。
• CMSサーバへの動画アップロードは避けてください。

再生方法

ー「動画を自動再生する」（チェックボックス）

「動画を自動再生する」にチェックすると、「商品詳細」画面にて動画が表示された際に、自動的に再生がはじまります。
ミュートでの再生となります。

ー「ループ再生する」（チェックボックス）

「ループ再生する」にチェックすると、動画がループして何度も再生されます。
「動画を自動再生する」のチェックがONの場合のみ有効です。

チェックOFFの場合は、一度の再生で停止します。

「商品画像パーツ」の下部にサムネイル表示される画像を指定できます。 半角（URL形式）：1000文字

＜ご注意事項＞

• http:// https://を含めて入力してください。

サムネイル画像URLで指定したサムネイル画像の下に表示するキャプションを入力します。 全角：50文字

「商品画像パーツ」内での商品画像の表示順を設定できます。

すべての商品画像の最初に表示する

［商品情報］商品画像設定で登録した商品画像の一番前に動画を表示します。
「商品詳細」画面を開いたときに、一番最初に動画が表示されます。

「自動再生」を設定している場合、再生回数により重量課金される動画サービスなどをご利用の場合はご注意ください。

表示順を指定するー［　］枚目の商品画像の次

［商品情報］商品画像設定で登録した商品画像のうち、指定の画像の次に動画を表示します。
［3］と指定した場合は、4番目に動画が表示されます。 1～40

すべての商品画像の最後に表示する

［商品情報］商品画像設定で登録した商品画像の一番後ろに動画を表示します。
一番最後に動画が表示されます。

基本的に、各サービス提供元のマニュアルをご覧ください。
以下については、futureshopで作成したECサイトに掲載するタグとして、設定いただきたいパラメータや属性となります。

全サービス共通

• allow属性にfullscreenの設定してください。

YouTube

• 参考マニュアル
• カスタマイズマニュアル

必須パラメータ

• enablejsapi=1をクエリパラメータに付与してください。
• クエリパラメータのsi=(××××)は削除しないでください。

オートプレイ有効化

• autoplay=1とmute=1をクエリパラメータに付与してください（自動再生時は、ミュートに設定にします）。
• allow属性にautoplayを記述してください。

ループ再生有効化

• loop=1とplaylist={動画ID}をクエリパラメータに付与してください。動画IDはURL末尾にある11桁の英数字です。{}は不要です。

＜サンプルタグ＞

上記全ての指定を盛り込んだタグのサンプルは以下の通りです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/vMdwyPfoMMI?si=rwww6KkYwKjjPmhc&enablejsapi=1&autoplay=1&mute=1&loop=1&playlist=vMdwyPfoMMI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

※本タグでは、futureshop関連の動画が流れます。そのままお使いにならないでください。

Vimeo

• 参考マニュアル
• カスタマイズマニュアル

オートプレイ有効化

• autoplay=1とmuted=1をクエリパラメータに付与してください（自動再生時は、ミュートに設定にします）。
• allow属性にautoplayを記述してください。

ループ再生有効化

• loop=1をクエリパラメータに付与してください。

＜サンプルタグ＞

上記全ての指定を盛り込んだタグのサンプルは以下の通りです。

<iframe src="https://player.vimeo.com/video/76979871?autoplay=1&muted=1&loop=1" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay"></iframe>

※本タグでは、Vimeoのオフィシャル動画が流れます。そのままお使いにならないでください。

TikTok

• カスタマイズマニュアル

必須パラメータ

• iframeに設定するsrcは、www.tiktok.com/player/v1/{tiktok_post_id}の形式で必要なパラメータを付与してください。{}は不要です。

オートプレイ有効化

• autoplay=1をクエリパラメータに付与してください。
  ただし、mutedは自動再生onの時もoffの時も設定しないでください（自動再生時は、ミュートになります）。
• allow属性にautoplayを記述してください。

ループ再生有効化

• loop=1をクエリパラメータに付与してください。

＜サンプルタグ＞

上記全ての指定を盛り込んだタグのサンプルは以下の通りです。

<iframe height="300" width= "400" src="https://www.tiktok.com/player/v1/6718335390845095173?&music_info=1&description=1&autoplay=1&loop=1" allow="fullscreen" title="test" allow="autoplay"></iframe>

※本タグでは、TikTokマニュアルで公開されているサンプル動画が流れます。そのままお使いにならないでください。