メディア – ビデオ

Last update: Fri May 17 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

初心者
中級
ユーザー

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

ストアフロントのホームページのビデオ

NOTE

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

ビデオツールボックス

ツール

アイコン

説明

移動

{width="25"}

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

（ラベル）

Video

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

設定

{width="25"}

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

Hide

{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 をペーストします。

の URL Page Builder この例で使用するビデオは次のとおりです。 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`	指定したパディングを考慮して、ビデオコンテナの右端に沿ってコンテンツを配置します。

を Border ビデオコンテナの 4 つの辺すべてに適用されるスタイル：

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	コンテナのすべての側面の内側の端に適用される空白のスペースの量です。

ビデオの移動

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

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

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

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

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

recommendation-more-help

85b60248-86a4-4d5f-9933-5179643f608d