Utiliser du code pour ajouter du contenu audio et vidéo à votre site créé avec Website Builder

Outre l'utilisation de l'un de nos nombreux widgets, vous pouvez également ajouter du contenu audio et vidéo à votre site dans Website Builder à l'aide du langage HTML et du composant « Code ». Dans ce guide, nous vous expliquons comment procéder.

• Étape 1 - Téléchargez le fichier audio ou vidéo sur votre espace web
• Étape 2 - Ouvrez le Website Builder
• Étape 3 - Intégrer le code dans Website Builder
• Étape 4 - Enregistrer et publier

Remarque : le composant de code est une fonctionnalité de Website Builder Premium et Business + E-commerce. Si vous utilisez actuellement la formule Starter, vous pouvez passer à une formule supérieure ou utiliser le widget hrefhttps://help.one.com/hc/en-us/articles/9172763029393hrefYouTube href»href à la place. 

Étape 1 - Téléchargez le fichier audio ou vidéo sur votre espace web

Commencez par télécharger votre fichier audio ou vidéo sur votre espace web à l'aide du Gestionnaire de fichiers ou via FTP. Les fichiers audio doivent être au format mp3 et les fichiers vidéo au format mp4.

1. Connectez-vous au panneau de configuration one.com.
2. Ouvrez le Gestionnaire de fichiers dans les paramètres d'hébergement, dans le menu de gauche.
3. Cliquez sur « + Télécharger » et sélectionnez le fichier audio (mp3) ou vidéo (mp4) que vous souhaitez intégrer à votre site.
4. Copiez le chemin d'accès complet de votre fichier et collez-le dans un fichier texte pour pouvoir l'utiliser ultérieurement.

Étape 2 - Ouvrez le Website Builder

1. Ouvrez le créateur de sites Web.
2. Cliquez sur « Widgets » dans le menu des composants situé à gauche.
3. Faites défiler vers le bas et sélectionnez « Code ».

Étape 3 - Intégrer le code dans Website Builder

1. Copiez l'un des exemples de code ci-dessous et collez-le dans le composant de code de Website Builder.
2. Remplacez « FULL PATH » dans l'exemple de code par le chemin d'accès complet de votre fichier audio ou vidéo.
3. Cliquez sur Enregistrer.

Choisissez l'un des exemples ci-dessous ou créez votre propre code à l'aide des balises hrefhttps://www.w3schools.com/tags/tag_audio.asphrefHTML <audio> et HTML <video>. N'oubliez pas de remplacer « FULL PATH » par le chemin d'accès complet de votre fichier audio ou vidéo.

Audio :

Intégrer un fichier audio MP3 :

</audio>

Intégrez un fichier audio MP3 qui se lance automatiquement :

</audio>

Remarque : certains navigateurs limitent la lecture automatique des fichiers audio ou vidéo, même si vous les avez intégrés à votre code.

Vidéo :

Intégrer un fichier vidéo MP4 :

</video>

Intégrez un fichier vidéo MP4 qui démarre automatiquement :

</video>

Conseil : la taille par défaut de la vidéo est de 640 × 480. Vous pouvez modifier cette taille en ajustant les valeurs de largeur et de hauteur dans le code. Vous pouvez également rendre la vidéo adaptative à l'écran de l'utilisateur en définissant la largeur sur « 100 % » (width=« 100 % ») et la hauteur sur « auto » (height=« auto »).

Étape 4 - Enregistrer et publier

1. Le composant a désormais été ajouté à votre espace de travail. Faites glisser le composant à l'emplacement où le fichier doit se trouver sur votre site.
2. Cliquez sur « Aperçu » pour vérifier si le résultat vous convient.
3. Si tout est en ordre, cliquez sur « Enregistrer et publier » pour que vos modifications soient visibles en ligne.

Astuce : ajoutez à votre site un composant hrefhttps://help.one.com/hc/en-us/articles/360007529677hrefbox href»href aux mêmes dimensions que votre vidéo, puis associez le composant de code à cette zone. Cela vous permettra de mieux contrôler l'emplacement de l'audio ou de la vidéo. La taille de la vidéo est déterminée par la hauteur et la largeur indiquées dans le code HTML.

Articles liés :

• What puis-je faire avec un composant de conteneur ?
• https://help.one.com/hc/en-us/articles/360002274197Utilisation de l’éditeur de vue mobile