ページにカスタムビデオを埋め込む

GemPages では、YouTube や Vimeo のコンテンツを組み込むだけでなく、カスタム コードを使用して他のホスティング サービスからメディアを追加することもできます。

ホスティングサーバーにビデオをアップロードする

この場合、ホストとして Shopify CDN (コンテンツ配信ネットワーク) を使用します。

ステップ 1：へ行く Shopify管理者 > コンテンツ > .

ステップ 2： クリックしてください "ファイルをアップロード右上隅にある」ボタン。 

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

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

動画をページに埋め込む

この時点から、手順は特定のバージョンに応じて異なる場合があります。 GemPages エディター ご使用のバージョンに対応する手順を見つけて、それに応じて次の手順に進んでください。

Version 6

ステップ 1： の中に GemPagesダッシュボード選択したページをクリックして、 エディター.

ステップ 2: を検索します。 液体 要素をページにドラッグ アンド ドロップします。

ステップ 3：を右クリックします 液体 要素を選択し、「コードの編集"

ステップ 4: オプションを選択して、コードをコピーし、コード エディター ウィンドウに貼り付けます。

ナビゲーション コントロールによる自動再生:

<video poster="" loop="" muted="" playsinline="" controls="" autoplay="" src="ABCDEF" width="100%"></video>

ナビゲーション コントロールなしの自動再生:

<video poster="" loop="" muted="" playsinline="" autoplay="" src="ABCDEF" width="100%"></video>

自動再生やループはなく、ナビゲーション コントロールがあります。

<video poster="YYYYY" controls="" playsinline="" src="ABCDEF" width="100%"></video>

ABCDEFを置き換える ホスティング サーバーからコピーした URL を使用します。

3番目のオプションでは、ファイルは自動再生されないため、サムネイル画像を設定できます。これを行うには、 ゆーゆー 画像の URL を入力します。

ステップ 5： 打つ "Save」と入力してコードエディターを終了します。

ステップ 6： 打つ "Save"と"パブリッシュ"。

Version 7

ステップ 1から： GemPagesダッシュボード > ページ、対象のページを見つけてエディターを開きます。

ステップ 2： 入る カスタムコード 左側のサイドバーの検索バーにドラッグし、希望の場所にドラッグ アンド ドロップします。 

ステップ 3: 表示する要素を見つけます 設定 タブ。ここから、 カスタムコード セクションで、[コードの追加] をクリックしてコード パネルを開きます。

ステップ4： コードパネルで、次のコードを貼り付けます。 HTML/リキッド タブには何も表示されないことに注意してください。

• ナビゲーション コントロールによる自動再生:

<video poster="" loop="" muted="" playsinline="" controls="" autoplay="" src="ABCDEF" width="100%"></video>

• ナビゲーション コントロールなしの自動再生:

<video poster="" loop="" muted="" playsinline="" autoplay="" src="ABCDEF" width="100%"></video>

• 自動再生やループはなく、ナビゲーション コントロールがあります。

<video poster="YYYYY" controls="" playsinline="" src="ABCDEF" width="100%"></video>

ABCDEFを置き換える ホスティング サーバーからコピーした URL を使用します。

3番目のオプションでは、ファイルは自動再生されないため、サムネイル画像を設定できます。これを行うには、 ゆーゆー 画像の URL を入力します。

ステップ 5: 完了したら、 Save ボタンをクリックして変更を保存し、コード パネルを閉じます。

ステップ6： ページを保存して再公開し、変更内容をストアフロントに反映させます。

GemPagesをマスターするためのガイドがさらに見つかります こちら.