Comment ajouter une vidéo à la page

Pour ajouter un bloc contenant une vidéo à la page, ouvrez la bibliothèque de blocs et accédez à la catégorie « Vidéo ».

Pour importer une vidéo sur Tilda, cliquez sur « Contenu » dans n'importe quel bloc de la catégorie « Vidéo », puis sélectionnez MP4 ou WEBM dans le champ « Source vidéo ». Cliquez ensuite sur l'icône d'importation de fichier. Vous pouvez importer une vidéo au format MP4 ou WEBM d'une taille maximale de 5 Mo.

Vous pouvez ajouter des vidéos YouTube à l'aide des blocs VD01 (Vidéo), VD04 (bouton « Lecture »), VD06N (vidéo sur plusieurs colonnes), VD08 (texte et vidéo sur deux colonnes), VD09 (vidéo en fenêtre contextuelle), VD11 (vidéo avec une image de couverture personnalisée), VD12 (vidéo et image sur une ligne), VD13 (diffusion en direct YouTube avec chat en direct), VD14 (liste de lecture de cours 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 des blocs avec une image en 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 web 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 ".

Vous pouvez ajouter des vidéos Vimeo à l'aide des blocs VD01 (Vidéo), VD04 (bouton « Lecture »), VD06N (Vidéo sur plusieurs colonnes), VD08 (Texte et vidéo sur deux colonnes), VD09 (vidéo contextuelle), VD11 (vidéo avec une couverture personnalisée), VD12 (vidéo et image sur une ligne), VD14 (liste de lecture de cours vidéo), AB701 (titre, description et vidéo), BF402N (vidéo ou image et formulaire sur deux colonnes), certains blocs de galerie, ainsi que des blocs avec une image en 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 (le paramètre de hachage ?h=) à la fin du lien, après l'ID de la vidéo. Pour que la vidéo puisse être lue, ajoutez cette combinaison dans le champ « Vimeo Private Link Hash ».

Vous pouvez télécharger la vidéo sur votre serveur et l'insérer dans les blocs via la balise vidéo HTML5. Il s'agit des blocs VD01 (Vidéo), VD04 (bouton « Lecture »), VD08 (Texte et vidéo sur deux colonnes), VD09 (vidéo en pop-up), VD11 (Vidéo avec une image de couverture personnalisée), VD12 (Vidéo et image sur une seule ligne), 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 en plein écran en arrière-plan (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 de montage ou de conversion vidéo.

Placez ensuite le fichier sur un hébergement et obtenez un lien direct vers celui-ci. Notez que vous devrez très probablement utiliser un service d'hébergement de fichiers payant, car tous les services de stockage de fichiers ne disposent pas de cette fonctionnalité.

Une fois que vous aurez obtenu le lien vers le fichier, rendez-vous dans la section « Contenu » du bloc avec la vidéo HTML5 et ajoutez le lien vers vos vidéos dans les deux formats dans les champs prévus à cet effet.

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.

Vous pouvez ajouter les vidéos Kinescope à l'aide des blocs VD01 (Vidéo), VD04 (bouton « Lecture »), VD08 (Texte et vidéo sur deux colonnes), VD09 (vidéo contextuelle), VD11 (Vidéo avec une jaquette personnalisée), VD12 (Vidéo et image sur une ligne), VD14 (liste de lecture de cours 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 en arrière-plan.

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

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.

Vous pouvez ajouter des vidéos via iFrame à l'aide des blocs VD01 (Vidéo), VD04 (bouton « Lecture »), VD08 (Texte et vidéo sur deux colonnes), VD09 (vidéo contextuelle), VD11 (Vidéo avec une image de couverture personnalisée), VD12 (Vidéo et image sur une seule ligne), VD14 (Liste de lecture de cours 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 depuis n'importe quelle plateforme fournissant un code iframe pour l'intégration de vidéos dans un site web.

Avec cette option, les paramètres « Lecture automatique de la vidéo » et « Vidéo avec le son coupé » ne fonctionneront pas. Si la plateforme hébergeant la vidéo le permet, vous pouvez insérer les paramètres Autoplay et Mute dans le lien.

Vous pouvez utiliser une vidéo comme image de couverture ou dans d'autres blocs avec une image en arrière-plan, plutôt qu'une image d'arrière-plan statique. Rendez-vous dans l'onglet « Contenu » et collez le lien vers votre vidéo dans le champ prévu à cet effet. Vous pouvez télécharger votre vidéo sur Tilda, utiliser un lien vers une vidéo YouTube ou un lien vidéo HTML5 que vous avez obtenu en suivant le guide ci-dessus.

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 provenant des services YouTube, Vimeo et Kinescope. Pour ajouter une vidéo, vous devez indiquer ses informations au 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 liste de lecture doit être indiqué sur une nouvelle ligne.

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écialisé ou d'éditeurs en ligne tels que Veed.io).

Ensuite, téléchargez le fichier sur Tilda sur un service proposant un hébergement vidéo et permettant d'y accéder via un lien direct. Si vous avez téléchargé la vidéo sur un service tiers, indiquez le lien direct vers le fichier dans Tilda.

Vous pouvez ajouter une version vidéo d'aperçu si vous le souhaitez. Cela permet aux utilisateurs de se faire une première idée du contenu de la vidéo principale et de réduire le temps de chargement du site web.
La taille optimale de la vidéo est de 200 pixels de large et d'une durée maximale de 5 secondes.

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.

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.

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.

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.

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.