ドキュメントCommercePage Builder

[PaaS のみ]{class="badge informative" title="Adobe Commerce on Cloud プロジェクト（Adobeが管理する PaaS インフラストラクチャ）およびオンプレミスプロジェクトにのみ適用されます。"}

メディア – ビデオ

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 初心者
  • 中級
  • ユーザー

ビデオ コンテンツタイプを使用して、YouTube または Vimeo でホストされているビデオを Page Builder ステージ ​ に追加します。 ページやブロック、または製品やカテゴリの説明にビデオを簡単に埋め込むことができます。

​ ストアフロントのホームページに関するビデオ ​ {width="700" modal="regular"}

NOTE
Page Builder コンテンツに大きな変更を加える場合は、​ 管理者セッションの有効期間 ​ を増やして、作業中にセッションがタイムアウトしないようにすることをお勧めします。

ビデオツールボックス

​ ビデオツールボックス ​ {width="600" modal="regular"}

ツール
アイコン
説明
移動
​ 移動アイコン ​ {width="25"}
ビデオをステージ上の別の位置に移動します。
（ラベル）
Video
現在のコンテンツコンテナをビデオとして識別します。 画像コンテナにカーソルを合わせると、ツールボックスが表示されます。
設定
​ 設定アイコン ​ {width="25"}
Edit Video ​ページが開き、ビデオとコンテナのプロパティを変更できます。
Hide
​ アイコンを非表示 ​ {width="25"}
現在のビデオを非表示にします。
表示
​ アイコンを表示 ​ {width="25"}
非表示のビデオを表示します。
複製
​ 複製アイコン ​ {width="25"}
ビデオをコピーします。
削除
​ 削除アイコン ​ {width="25"}
ステージからビデオを削除します。
NOTE
非表示の要素はデータベースに保存され、顧客には表示されません。 ただし、これらの要素は、サイトをクロールする検索エンジンやその他のボットには表示されます。 また、非表示の属性を持つ API 呼び出しを通じてリクエストされた場合、ステージから削除しない限り、コンテンツの一部として返されます。

ビデオを追加

  1. 開始する前に、埋め込む YouTube または Vimeo ビデオに移動し、リンクをコピーします。

    または、有効なビデオファイルへの直接リンクをコピーすることもできます。 有効なリンクについては、​ 基本ビデオ設定 ​ を参照してください。

  2. Commerce Admin で、ビデオを追加する Page Builder ワークスペースに戻ります。

  3. Page Builder パネルで Media を展開し、Video プレースホルダーをステージにドラッグします。

    ​ ビデオプレースホルダーのステージへのドラッグ ​ {width="600" modal="regular"}

  4. ビデオコンテナにカーソルを合わせてツールボックスを表示し、設定 （ ​ 設定アイコン ​ {width="20"}）アイコンを選択します。

  5. Video URL：コピーしたビデオの URL をペーストします。

    この例で使用される Page Builder ビデオの URL は https://www.youtube.com/watch?v=Y0KNS7C5dZA です。

  6. ビデオの Maximum Width を制限するには、最大幅をピクセル単位で入力します。

    空白の場合、ビデオの幅はコンテナで許可されている幅になり、余白とパディングを使用できます。

  7. 右上隅にある「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

ビデオ設定の変更

  1. ビデオコンテナにカーソルを合わせてツールボックスを表示し、設定 （ ​ 設定アイコン ​ {width="20"}）アイコンを選択します。

  2. 次の節に従って、設定を変更します。

  3. 右上隅にある「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

基本的なビデオ設定

  1. 現在のビデオを変更するには、Video URL を更新します。

    有効なビデオ URL を入力します。 有効なビデオ URL は、次へのリンクです。

    • YouTube ビデオ：https://youtu.be/CoDhMRUUjeI
    • Vimeo ビデオ：https://vimeo.com/190156113
    • 有効なビデオ ファイル （.mp4 を推奨）: https://myvideos.com/spiral.mp4

  2. ストアフロントのビデオに許可される幅を変更するには、新しい Maximum Width をピクセル単位で入力します。

    空白の場合、ビデオはコンテナの全幅を拡大し、余白とパディングの許容値を減らします。

  3. ページの読み込み後にビデオを自動開始するには、Autoplay を Yes に設定します。

    自動再生が Yes に設定されている場合、ビデオはポリシーに従って再生時にミュートされます。 ただし、この設定を使用しても、モバイルデバイスでビデオを自動再生することはできません。 これらのポリシーについて詳しくは、次の開発者向けリソースを参照してください。

    自動再生が No に設定されている場合、ビデオはユーザーの要求に応じてのみ再生されます。

Advanced

  1. コンテナ内のビデオの水平方向の位置を制御するには、Alignment のいずれかを選択します。

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    オプション 説明
    Default 現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。
    Left 指定したパディングを考慮して、ビデオコンテナの左境界線に沿ってコンテンツを配置します。
    Center 指定したパディングを許容して、ビデオコンテナの中央にコンテンツを揃えます。
    Right 指定したパディングを考慮して、ビデオコンテナの右端に沿ってコンテンツを配置します。

  • ビデオコンテナの 4 つの辺すべてに適用する Border スタイルを設定します。

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    オプション 説明
    Default 関連付けられたスタイル シートで指定されている既定の罫線スタイルを適用します。
    None コンテナの境界線の表示はしません。
    Dotted コンテナの境界線は点線で表示されます。
    Dashed コンテナの境界線は破線で表示されます。
    Solid コンテナの境界線は実線で表示されます。
    Double コンテナの境界線は二重線で表示されます。
    Groove コンテナの境界線は溝付き線で表示されます。
    Ridge コンテナの境界線は、境界線として表示されます。
    Inset コンテナの境界線は、インセットされた線として表示されます。
    Outset コンテナの境界線は、先頭行として表示されます。

  • None 以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。

    ​ 境界線のカラー ​ {width="600" modal="regular"}

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    オプション 説明
    Border Color 見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。
    Border Width 境界線の幅のピクセル数を入力します。
    Border Radius ピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。

  • （オプション）ビデオコンテナに適用する現在のスタイルシートの CSS classes の名前を指定します。

    複数のクラス名はスペースで区切ります。

  • ビデオコンテナの外側の余白と内側のパディングを指定する Margins and Padding の値をピクセル単位で入力します。

    対応する各値をビデオコンテナ図に入力します。

    table 0-row-2 1-row-2 2-row-2 layout-auto
    コンテナ領域 説明
    Margins コンテナのすべての側面の外側の端に適用される空白スペースの量。
    Padding コンテナのすべての側面の内側の端に適用される空白のスペースの量です。

ビデオの移動

  1. ビデオコンテナにカーソルを合わせてツールボックスを表示し、移動 （ ​ 移動アイコン ​ {width="20"}）アイコンを選択します。

    ​ ビデオの移動 ​ {width="500" modal="regular"}

  2. ビデオを選択して、赤いガイドラインのすぐ下の新しい位置にドラッグします。

    ​ 赤いガイドラインを使用したビデオの配置 ​ {width="500" modal="regular"}

ステージからビデオを削除

  1. ビデオコンテナにカーソルを合わせてツールボックスを表示し、「削除」（ 削除アイコン ）アイコンを選択します。

  2. 確認を求めるメッセージが表示されたら、「OK」をクリックします。

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d