Intégrez une vidéo personnalisée sur votre page

En plus d'intégrer du contenu YouTube et Vimeo, GemPages vous permet d'utiliser du code personnalisé pour ajouter des médias provenant d'autres services d'hébergement.

Téléchargez votre vidéo sur un serveur d'hébergement

Dans ce cas, nous utiliserons Shopify CDN (Content Delivery Network) comme hôte.

Étape 1: Aller à Administrateur Shopify > Menu > Documents officiels.

Étape 2: Clique sur le "Télécharger des fichiers" bouton dans le coin supérieur droit. 

Étape 3:Sélectionnez le fichier à télécharger depuis votre appareil.

Étape 4:Une fois le téléchargement terminé, copiez l'URL en cliquant sur le chaîne icône.

Intégrez la vidéo sur votre page

À partir de ce point, les étapes peuvent différer en fonction de la version spécifique du Éditeur GemPages vous utilisez. Veuillez rechercher les instructions correspondant à votre version et procéder aux étapes suivantes en conséquence.

Version 6

Étape 1: Dans le Tableau de bord GemPages, cliquez sur la page de votre choix et entrez le Éditeur.

Étape 2: Rechercher le Liquid élément à glisser-déposer sur votre page.

Étape 3: Faites un clic droit sur le Liquid élément et sélectionnez «Modifier le code" .

Étape 4:Sélectionnez une option pour copier et coller le code dans la fenêtre de l'éditeur de code.

Lecture automatique avec commandes de navigation :

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

Lecture automatique sans commandes de navigation :

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

Pas de lecture automatique, pas de boucle et avec des commandes de navigation :

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

Remplacer ABCDEF avec l'URL que vous avez copiée depuis le serveur d'hébergement.

Pour la troisième option, étant donné que le fichier ne sera pas lu automatiquement, vous pouvez configurer une image miniature pour celui-ci. Pour ce faire, remplacez Yyyyy avec l'URL de votre image.

Étape 5: Frapper "Enregistrer" et quittez l'éditeur de code.

Étape 6: Frapper "Enregistrer" et "Publier ».

Version 7

Étape 1: De l' Tableau de bord GemPages > Pages, localisez la page cible pour ouvrir l'éditeur.

Étape 2: Entrer code personnalisé dans la barre de recherche de la barre latérale gauche, puis faites-le glisser et déposez-le à l'emplacement de votre choix. 

Étape 3: Localisez l'élément pour révéler le Paramètres onglet. À partir d'ici, sous le Code personnalisé section, cliquez sur Ajouter un code pour ouvrir le panneau de code.

Étape 4 : Dans le panneau de code, collez le code suivant dans le HTML/Liquide languette.

• Lecture automatique avec commandes de navigation :

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

• Lecture automatique sans commandes de navigation :

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

• Pas de lecture automatique, pas de boucle et avec des commandes de navigation :

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

Remplacer ABCDEF avec l'URL que vous avez copiée depuis le serveur d'hébergement.

Pour la troisième option, étant donné que le fichier ne sera pas lu automatiquement, vous pouvez configurer une image miniature pour celui-ci. Pour ce faire, remplacez Yyyyy avec l'URL de votre image.

Étape 5:Une fois terminé, appuyez sur le Enregistrer bouton pour enregistrer vos modifications et fermer le panneau de code.

Étape 6 : Enregistrez et republiez votre page pour vivre vos modifications dans la vitrine.

Vous trouverez d'autres guides pour vous aider à maîtriser GemPages ici.