ビデオ要素

ビデオ要素について

バージョン6とは異なり、最新バージョンのエディターでは、次のようなさまざまなビデオ要素が組み合わされています。 YouTubeでご覧いただけます。 の三脚と Vimeoの、単一の ビデオ 要素。

この更新された機能により、ユーザーはさまざまなページ タイプでビデオを簡単に紹介し、カスタマイズして顧客の注目をすぐに引き付けることができます。

ビデオ要素を追加するには?

ステップ1： Video Cloud Studioで GemPages エディター 編集するページを選択します。左側のサイドバーのメディア セクションにあるビデオ要素を見つけるか、検索バーを使用してすばやくアクセスします。

ステップ2： 要素を任意の位置にドラッグ アンド ドロップします。

ビデオ要素をクリックすると、その設定オプションが左側のサイドバーに表示されます。これらのオプションについては、次のセクションで説明します。

設定タブを構成する

その 設定 タブでは、ページ上でのビデオの表示方法や動作を次のように完全に制御できます。

ビデオ源

• タイプ: ビデオプラットフォームを選択してください: YouTubeでご覧いただけます。, Vimeoのまたは ビデオホスティング (ビデオをShopifyに直接アップロードするか、外部ホスティング リンクを使用します)。
• ビデオリンク: ビデオの URL またはホスティング リンクを貼り付けます。
• サムネイル: ビデオの再生前に表示されるカスタム プレビュー イメージをアップロードします (自動再生が無効になっている場合に特に便利です)。
• ビデオの開始: ビデオの開始点を選択します。 
• ビデオ終了: ビデオの終了点を選択します。

以下は、ステップバイステップのガイドです。 Shopifyに自分のビデオをアップロードする ホストとしてShopify CDN (コンテンツ配信ネットワーク) を使用します。

ステップ 1：へ行く Shopify管理 > コンテンツ > ファイル.

ステップ 2： クリックしてください "ファイルをアップロード」ボタンをクリックしてください。ここにファイルをアップロードしていない場合は、「ファイルをアップロード画面中央に「 」ボタンが表示されます。

ステップ 3: デバイスからアップロードするファイルを選択します。

ステップ 4: アップロードが完了したら、 チェーン アイコンを押します。.

GemPages ダッシュボードに戻り、コピーしたリンクを Web リンク ボックスに貼り付けます。

ビデオ設定

ページに読み込まれたときのビデオの動作を制御します。

• コントロールバー: ビデオ プレーヤーのコントロール (再生、一時停止、進行状況バーなど) を有効または無効にします。
• 音: デフォルトでサウンドをオン/オフにします。
• 遅延負荷: ページ速度を向上させるために、ビデオがビューポート内にある場合にのみ読み込みます。
• 自動再生: ページが読み込まれるとビデオが自動的に再生されます。
• ループビデオ: ビデオを連続ループで繰り返します。

注意：

• 遅延読み込みが有効になっている場合、YouTube ビデオは自動再生されません。
• 一部のブラウザでは自動再生に制限が課せられていることにご注意ください。その場合、動画はサムネイル画像に戻り、視聴者は手動で再生をクリックして再生を開始する必要があります。
• ビデオのサウンドを有効にすると、自動再生が無効になる場合もあります。

サイズ

フレーム： 正方形、3:2、4:3、16:9、21:9 など、ビデオのアスペクト比を選択します。

形状

次のオプションを使用してビデオ フレームのスタイルを設定します。

• 境界： 動画の周囲に枠線を追加します。設定 カラー, 厚さ, ストロークスタイル (実線、破線、点線)。
• コーナー： ビデオフレームの端を丸くするには、 半径すべてのコーナーを一度に、または個別に修正することができます。
• 影： 奥行きやフォーカスを表現するために影の効果を追加します。設定:
  • タイプ: 内側、外側、中央、方向性
  • リーダーシップ: 影の角度を設定します（例：45°）
  • 色圏, 距離, ブラー, サイズ

詳細タブを設定する

より高度なカスタマイズについては、 高機能 タブをクリックし、 この記事.

Video Elementに関するよくある質問

GemPagesにVturb動画を追加する方法

GemPagesにVturbの動画を埋め込むには、 カスタムコード 要素。

ステップ1：Vturbの埋め込みコードを取得する

• あなたに行く Vturbダッシュボード
• 使用したいビデオを選択してください
• 詳しくはこちら 埋め込み／共有
• コピー 完全な埋め込みコード

ステップ2：GemPagesにカスタムコード要素を追加する

• ページを開く GemPages エディター
• ドラッグ カスタムコード レイアウトに要素を追加する

• まず HTML/リキッド タブ

ステップ3：埋め込みコードを貼り付ける

• 貼り付け Vturbの完全な埋め込みコード HTML/Liquidフィールドに
• 詳しくはこちら Save その後 パブリッシュ

重要事項：

• 常に使用する Vturbアカウントから生成された埋め込みコード
• 他の動画のIDを再利用または変更しないでください
• ビデオを確認してください 出版され、活動中 Vturbで