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






ビデオを追加
-
開始する前に、埋め込む YouTube または Vimeo ビデオに移動し、リンクをコピーします。
または、有効なビデオファイルへの直接リンクをコピーすることもできます。 有効なリンクについては、 基本ビデオ設定を参照してください。
-
Commerce Admin で、ビデオを追加する Page Builder ワークスペースに戻ります。
-
Page Builder パネルで Media を展開し、Video プレースホルダーをステージにドラッグします。
-
ビデオコンテナにカーソルを合わせてツールボックスを表示し、設定 (
-
Video URL:コピーしたビデオの URL をペーストします。
この例で使用される Page Builder ビデオの URL は
https://www.youtube.com/watch?v=Y0KNS7C5dZA
です。 -
ビデオの Maximum Width を制限するには、最大幅をピクセル単位で入力します。
空白の場合、ビデオの幅はコンテナで許可されている幅になり、余白とパディングを使用できます。
-
右上隅にある「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。
ビデオ設定の変更
基本的なビデオ設定
-
現在のビデオを変更するには、Video URL を更新します。
有効なビデオ URL を入力します。 有効なビデオ URL は、次へのリンクです。
- YouTube ビデオ:
https://youtu.be/CoDhMRUUjeI
- Vimeo ビデオ:
https://vimeo.com/190156113
- 有効なビデオ ファイル (
.mp4
を推奨):https://myvideos.com/spiral.mp4
- YouTube ビデオ:
-
ストアフロントのビデオに許可される幅を変更するには、新しい 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
コンテナの境界線は二重線で表示されます。 Groove
コンテナの境界線は溝付き線で表示されます。 Ridge
コンテナの境界線は、境界線として表示されます。 Inset
コンテナの境界線は、インセットされた線として表示されます。 Outset
コンテナの境界線は、先頭行として表示されます。 -
None
以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。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 コンテナのすべての側面の内側の端に適用される空白のスペースの量です。
ビデオの移動
-
ビデオコンテナにカーソルを合わせてツールボックスを表示し、移動 (
-
ビデオを選択して、赤いガイドラインのすぐ下の新しい位置にドラッグします。
ステージからビデオを削除
-
ビデオコンテナにカーソルを合わせてツールボックスを表示し、「削除」(
-
確認を求めるメッセージが表示されたら、「OK」をクリックします。