メディア – ビデオ

最終更新日： 2026年6月16日

作成対象：

{"id":"b5a62a22-46f7-4f0d-b151-3fc640bef588"},{"id":"e8ccd51f-da0d-4e3b-939b-e30d5ebb1ea5"}
{"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"}

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

ストアフロントのホームページの動画 {width="700" modal="regular"}

NOTE

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

ビデオツールボックス

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

ツール

アイコン

説明

移動

{width="25"}

ビデオをステージ上の別の位置に移動します。

（ラベル）

Video

現在のコンテンツコンテナをビデオとして識別します。画像コンテナにカーソルを合わせると、ツールボックスが表示されます。

設定

{width="25"}

ビデオとコンテナのプロパティを変更できる Edit Video ページを開きます。

非表示

{width="25"}

現在のビデオを非表示にします。

表示

{width="25"}

非表示のビデオを表示します。

重複

{width="25"}

ビデオのコピーを作成します。

削除

{width="25"}

ステージからビデオを削除します。

NOTE

非表示の要素はデータベースに保存され、顧客には表示されません。ただし、これらの要素は、サイトをクロールする検索エンジンやその他のボットには表示されます。また、非表示の属性を持つ API 呼び出しを通じてリクエストされた場合、ステージから削除しない限り、コンテンツの一部として返されます。

ビデオを追加

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

別の方法として、有効なビデオファイルへの直接リンクをコピーすることもできます。有効なリンクについては、基本的なビデオ設定を参照してください。
Commerce管理者で、ビデオを追加するPage Builder ワークスペースに戻ります。
Page Builder パネルで、Mediaを展開し、Video プレースホルダーをステージにドラッグします。

{width="600" modal="regular"}
ビデオコンテナにカーソルを合わせてツールボックスを表示し、設定（ {width="20"}）アイコンを選択します。
Video URLに、コピーしたビデオのURLを貼り付けます。

この例で使用されているPage Builder ビデオのURLはhttps://www.youtube.com/watch?v=Y0KNS7C5dZAです。
ビデオの Maximum Width を制限するには、最大幅をピクセル単位で入力します。

空白の場合、ビデオはコンテナで許可される幅と同じ幅になり、余白とパディングが可能になります。
右上隅の「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

ビデオ設定の変更

ビデオコンテナにカーソルを合わせてツールボックスを表示し、設定（ {width="20"}）アイコンを選択します。
次のセクションに従って設定を変更します。
- 基本
- アドバンス
右上隅の「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

基本的なビデオ設定

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

ビデオのURLを入力してください。有効なビデオ URLは、次のリンクに設定できます。
- YouTube ビデオ：https://youtu.be/CoDhMRUUjeI
- Vimeo ビデオ：https://vimeo.com/190156113
- 有効なビデオファイル（.mp4をお勧めします）: https://myvideos.com/spiral.mp4
ストアフロントでビデオに使用できる幅を変更するには、新しい Maximum Width をピクセル単位で入力します。

空白の場合、ビデオはコンテナの全幅を拡張し、余白とパディングの許容値を小さくします。
ページの読み込み後にビデオを自動的に開始するには、AutoplayをYesに設定します。

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

Advanced

コンテナ内でのビデオの水平方向の配置を制御するには、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`	コンテナの境界線が2行で表示されます。
`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	コンテナのすべての側面の内側エッジに適用される空白スペースの量。

ビデオの移動

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

{width="500" modal="regular"}
赤いガイドラインのすぐ下にある新しい位置にビデオを選択してドラッグします。

{width="500" modal="regular"}

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

ビデオコンテナにカーソルを合わせてツールボックスを表示し、削除（）アイコンを選択します。
確認を求められたら、OKをクリックします。

recommendation-more-help

commerce-admin-help-page-builder