Il existe plusieurs options pour ajouter une vidéo sur votre site web : L'ajout de vidéos YouTube et Vimeo, Kinescope, une option pour ajouter le lien direct vers une vidéo sur un serveur tiers (vidéo HTML5), et l'utilisation d'iFrame pour ajouter une vidéo.

Comment ajouter des vidéos YouTube

Vous pouvez ajouter des vidéos YouTube à l'aide des blocs VD01 (une vidéo), VD04 (affichage d'une vidéo après avoir cliqué sur le bouton "Play"), VD06N (deux vidéos), VD08 (vidéo et texte), VD09 (vidéo contextuelle), VD11 (vidéo avec une couverture personnalisée), VD12 (vidéo et image dans une rangée), VD13 (flux YouTube en direct avec un chat en direct), VD14 (liste de lecture vidéo), VD16 (widget vidéo), AB701 (titre, description et vidéo), BF402N (vidéo ou image et formulaire sur deux colonnes), certains blocs de galerie, ainsi que les blocs avec une image plein écran en arrière-plan(en savoir plus sur l'ajout d'une vidéo en arrière-plan).

Pour ajouter une vidéo, il vous suffit d'un lien vers une vidéo accessible au public et dont l'intégration sur des sites tiers est autorisée dans les paramètres de confidentialité.

Choisissez le bloc qui vous plaît le plus, accédez à son onglet Contenu et insérez un lien vers la vidéo.

Si vous souhaitez que la vidéo soit lue à partir d'un certain moment, ajoutez le fragment ?start= à l'URL et indiquez le temps requis en secondes à partir du début de la vidéo. Par exemple, XEfDYMngJeE?start=5025. Dans ce cas, la vidéo sera lue à partir de la 5025e seconde. Vous pouvez copier rapidement l'heure en cliquant avec le bouton droit de la souris sur le lecteur et en sélectionnant l'option " Copier l'URL de la vidéo à l'heure actuelle ".

Comment ajouter des vidéos Vimeo

Vous pouvez ajouter les vidéos Vimeo en utilisant les blocs VD01 (une vidéo), VD04 (affichage d'une vidéo après avoir cliqué sur le bouton Lire), VD06N (deux vidéos), VD08 (vidéo et texte), VD09 (vidéo pop-up), VD11 (vidéo avec une couverture personnalisée), VD12 (vidéo et image sur une ligne), VD14 (liste de lecture vidéo), VD16 (widget vidéo), AB701 (titre, description et vidéo), BF402N (vidéo ou image et formulaire sur deux colonnes), et certains blocs de galerie, ainsi que les blocs avec une image plein écran en arrière-plan.

Si votre vidéo est verrouillée par les paramètres de confidentialité de Vimeo, elle comportera une combinaison supplémentaire de chiffres et de lettres à la fin du lien, après l'identifiant de la vidéo. Pour que la vidéo soit lue, ajoutez cette combinaison au champ Vimeo Private Link Hash.

Comment ajouter des vidéos à partir d'un serveur tiers (vidéo HTML5)

Si votre vidéo n'est pas publiée sur les services d'hébergement vidéo mentionnés, vous pouvez la télécharger sur votre propre serveur et l'insérer à l'aide des blocs vidéo HTML5 suivants : VD01 (une vidéo), VD04 (affichage d'une vidéo après avoir cliqué sur le bouton Lire), VD08 (vidéo et texte), VD09 (vidéo pop-up), VD11 (vidéo avec une couverture personnalisée), VD12 (vidéo et image dans une rangée), VD16 (widget vidéo), AB701 (titre, description et vidéo), BF402N (vidéo ou image et formulaire dans deux colonnes), et certains blocs de galerie. Vous pouvez également ajouter une vidéo HTML5 en arrière-plan de votre site web, en utilisant des blocs avec arrière-plan plein écran(en savoir plus sur l'ajout d'une vidéo en arrière-plan).

Pour ajouter une telle vidéo à la page, vous devez utiliser des fichiers vidéo WebM et MP4. Vous pouvez convertir des vidéos dans ces formats à l'aide de convertisseurs en ligne ou de logiciels d'édition ou de conversion vidéo. Placez ensuite la vidéo sur l'hébergement et obtenez un lien direct vers le fichier. Notez que vous devrez probablement utiliser un service d'hébergement de fichiers payant, car tous les services de stockage de fichiers ne disposent pas d'une telle fonctionnalité.

Vous ne pouvez pas télécharger votre fichier vidéo sur Tilda , mais vous pouvez utiliser des services tiers qui fournissent un lien direct vers un fichier.

Allez dans l'onglet Contenu du bloc vidéo HTML5 et ajoutez le lien vers vos vidéos dans les deux formats dans les champs requis.

Dans certains blocs, il n'y a qu'un seul champ pour ajouter un lien vers une vidéo HTML5. Dans ce cas, vous ne pouvez utiliser qu'un seul format de fichier et MP4 est préférable.

Tableau de prise en charge des navigateurs pour les vidéos MP4 → https://caniuse.com/mpeg4
Tableau de prise en charge des navigateurs pour les vidéos WebM → https://caniuse.com/webm

Comment télécharger votre vidéo sur un serveur tiers ?

Pour ajouter un lien direct vers un fichier dans un bloc vidéo HTML5, vous devez le télécharger vers un service de stockage de fichiers. Les options de stockage dans le nuage telles que Google Drive ou Dropbox ne conviennent pas car elles ne fournissent pas de lien direct vers un fichier.

Pour cette tâche, vous devez utiliser des services ou des fournisseurs d'hébergement qui offrent un service de stockage de fichiers. Voyons comment télécharger un fichier et obtenir un lien direct vers celui-ci en prenant l'exemple de Selectel.

Comment ajouter des vidéos Kinescope

Vous pouvez ajouter les vidéos Kinescope en utilisant les blocs VD01 (une vidéo), VD04 (affichage d'une vidéo après avoir cliqué sur le bouton Play), VD08 (vidéo et texte), VD09 (vidéo pop-up), VD11 (vidéo avec une couverture personnalisée), VD12 (vidéo et image sur une ligne), VD14 (liste de lecture vidéo), AB701 (titre, description et vidéo), BF402N (vidéo ou image et formulaire sur deux colonnes), ainsi que certains blocs avec une image en plein écran comme arrière-plan.

Pour commencer à travailler avec le Kinescope, vous devez vous inscrire sur le site https://www.kinescope.com/ ou vous connecter à votre compte.

Cliquez sur "Démarrer gratuitement"

Pour télécharger votre vidéo sur Kinescope, cliquez sur le bouton Nouveau dans le coin supérieur droit, sélectionnez "Télécharger un fichier" et ajoutez une vidéo.

Pour ajouter la vidéo au site web, cliquez sur le bouton avec trois points près de la vidéo dans le Catalogue → Copiez le lien → Collez le lien dans l'onglet Contenu du bloc dans Tilda.

Comment ajouter une vidéo à l'aide d'une iFrame

Vous pouvez ajouter des vidéos avec iFrame en utilisant les blocs VD01 (une vidéo), VD04 (affichage d'une vidéo après avoir cliqué sur le bouton Lire), VD08 (vidéo et texte), VD09 (vidéo contextuelle), VD11 (vidéo avec une couverture personnalisée), VD12 (vidéo et image sur une ligne), VD14 (liste de lecture vidéo), AB701 (titre, description et vidéo), BF402N (vidéo ou image et formulaire sur deux colonnes).

Cette option permet d'ajouter des vidéos à partir de n'importe quelle plateforme qui fournit un code iframe pour intégrer des vidéos dans un site web.

Avec cette option, les paramètres "Vidéo en lecture automatique" et "Vidéo avec son coupé" ne fonctionneront pas. Si la plateforme qui héberge la vidéo le permet, vous pouvez insérer les paramètres de lecture automatique et de sourdine dans le lien.

Vidéos d'arrière-plan pour les couvertures et autres blocs

Vous pouvez utiliser une vidéo pour une couverture ou d'autres blocs avec une image en arrière-plan au lieu d'une image d'arrière-plan statique. Allez dans l'onglet Contenu et collez un lien vers votre vidéo dans le champ requis. Vous pouvez utiliser un lien vidéo YouTube ou un lien vidéo HTML5 que vous avez obtenu à l'aide du guide ci-dessus.

Un exemple de vidéo de fond

Un bloc avec une liste de lecture vidéo

Le bloc de la liste de lecture se trouve dans la catégorie "Vidéo" → bloc VD14.

Ce bloc prend en charge les vidéos des services YouTube, Vimeo et Kinescope. Pour ajouter une vidéo, vous devez spécifier ses données dans le format suivant :
Lien vers la vidéo ; Titre de la vidéo ; Durée de la vidéo ; Description de la vidéo

Un bref résumé de chaque vidéo de la sélection doit être spécifié sur une nouvelle ligne.

Widget vidéo

Le widget vidéo est une petite vidéo située dans le coin de l'écran qui peut vous aider à partager l'histoire de votre produit ou service. L'aperçu est diffusé sans son, et si vous cliquez dessus, la vidéo principale avec son est chargée.

Pour ajouter le widget vidéo, allez dans la catégorie Vidéo et sélectionnez le bloc VD16.

Avant de l'ajouter, vous devez préparer et optimiser votre vidéo pour le web (à l'aide d'un logiciel spécial ou d'éditeurs en ligne tels que Veed.io).

Ensuite, téléchargez le fichier sur un service qui permet de stocker des vidéos et d'y accéder à l'aide d'un lien direct.

Vous ne pouvez pas télécharger votre fichier vidéo sur Tilda, mais vous pouvez utiliser des services tiers.

La meilleure option est de télécharger le fichier sur votre hébergement, tel que Selectel. Guide détaillé →

Allez dans l'onglet Contenu du bloc et collez le lien vers la vidéo principale.

Vous pouvez ajouter la version de la vidéo de prévisualisation en option. Elle peut aider les utilisateurs à se faire une idée de la vidéo principale et réduire le temps de chargement du site web.
La taille optimale d'une vidéo est de 200px de large et de 5 secondes maximum.

Vous pouvez également spécifier un lien et un texte pour le bouton de la vidéo principale si votre objectif est d'encourager un visiteur à effectuer une action. Si vous n'avez pas besoin de bouton, laissez les champs vides.

Dans les paramètres du bloc, vous pouvez ajuster les paramètres du widget, de la vidéo principale qui s'ouvre et des boutons. Pour le widget, vous pouvez spécifier le rapport d'aspect, la largeur et les paramètres de la bordure, la position sur l'écran et d'autres paramètres. Pour la vidéo principale, vous pouvez configurer les paramètres de la bordure, de l'ombre et du bouton de lecture. La largeur de la vidéo est toujours fixe - 560x315 pour les vidéos horizontales et inversement - 315x560 pour les vidéos verticales.

Ajout d'une vidéo dans Zero Block

Pour ajouter une vidéo dans Zero Block → cliquez sur le bouton (+) et ajoutez un élément Vidéo → sélectionnez l'une des options disponibles pour ajouter une vidéo : YouTube, Vimeo, MP4, Kinescope → collez le lien vers la vidéo ou son ID.

Pour ajouter des vidéos provenant d'autres services, vous pouvez utiliser l'option d'intégration du code HTML : Ajoutez l'élément HTML → cliquez sur le bouton Modifier le code dans le panneau des paramètres → spécifiez le code pour intégrer le lecteur. Vous trouverez ci-dessous des exemples de la manière d'obtenir le code.

Vidéo pour un produit dans le catalogue

Dans le catalogue de produits, vous pouvez ajouter une vidéo pour présenter le produit. Pour ce faire, accédez à la fiche produit → cliquez sur le lien "Vidéo" près de l'image du produit et insérez le lien vers une vidéo YouTube, Vimeo ou Kinescope ou son identifiant.

Comment ajouter des vidéos aux flux

Dans les Flux, vous pouvez ajouter à la fois la vidéo principale de l'article (elle sera affichée au début de l'article et utilisée comme couverture dans la liste des articles) et insérer plusieurs vidéos dans le texte de l'article des Flux.

Pour ajouter la vidéo principale, allez dans le champ avec une image dans la carte d'édition de l'article des Flux → l'onglet "Vidéo", et collez le lien vers la vidéo.

La vidéo sera affichée au début du message.

Pour ajouter une vidéo dans le texte du message, cliquez sur l'icône plus à gauche → ajouter un bloc Vidéo → cliquez dessus et indiquez le lien vers la vidéo.

En cliquant sur les trois points à gauche du bloc, vous pouvez changer de vidéo.

La vidéo sera insérée dans le texte du message. Enregistrez les modifications.

Ensuite, la vidéo sera affichée dans le texte de la page de l'article.

Comment ajouter des vidéos à l'aide du code HTML

Vous pouvez ajouter des vidéos en intégrant le code du lecteur dans le bloc de code HTML. Pour ce faire, accédez aux paramètres du lecteur ou du service afin d'obtenir le code à intégrer.

Pour Kinescope, cliquez sur le bouton avec trois points près d'une vidéo dans la liste → Embed → sélectionnez responsive code si vous devez adapter le lecteur à la taille de l'écran ou fixed code pour ajouter un petit lecteur et spécifier sa taille et sa position dans le code copié → collez le code que vous avez reçu dans le bloc T123 de la catégorie "Other" ou dans l'élément HTML dans Zero Block.