Intégrer des fichiers vidéo dans vos bannières

Intégrez une vidéo .mp4 ou .webm à un calque : cliquez sur l’icône Settings du calque, puis collez l’URL dans le champ d’intégration vidéo.

Tutoriel vidéo : ajouter des vidéos intégrées aux exports de bannières Figma

Cette vidéo montre comment intégrer des fichiers vidéo à vos bannières avec le plugin Bannerify.

Les liens YouTube/Vimeo ne fonctionnent pas. Vous devez utiliser l’URL directe d’un fichier vidéo .mp4, en mettant en ligne d’abord votre vidéo sur un service comme Dropbox.

Par défaut, les URL de vidéos hébergées restent distantes dans les exports HTML. Bannerify conserve les URL directes des vidéos intégrées .mp4/.webm dans le HTML exporté au lieu de télécharger la vidéo dans le ZIP. Pour inclure les fichiers vidéo hébergés dans les ZIP d’export HTML, activez Download videos into ZIP à côté du champ d’URL d’intégration. Pour les imports Google Ads HTML5 et Google App Campaign Playable, les URL des vidéos intégrées restent non incluses, car ces imports ZIP n’acceptent pas les fichiers vidéo empaquetés.

L’API Figma Plugin ne permet pas de lire directement les fichiers vidéo depuis les calques de votre fichier Figma, mais Bannerify vous permet d’intégrer des vidéos à vos calques de timeline non textuels en collant l’URL directe d’un fichier .mp4 ou .webm.

Pour obtenir un fichier vidéo, vous pouvez parcourir les vidéos libres de droits gratuites d’un site comme Pixabay, ou mettre en ligne votre propre fichier .mp4 ou .webm sur un service d’hébergement de fichiers comme Dropbox ou Backblaze B2, puis copier l’URL du lien vers votre animation pour l’utiliser dans Bannerify.

Par défaut, votre vidéo est lue en boucle automatiquement, mais vous pouvez modifier ce comportement si besoin en désactivant l’option Loop Embed.

Pour retirer une animation vidéo de votre calque, cliquez de nouveau sur le bouton d’icône Settings et supprimez l’URL du champ d’intégration vidéo.

Si vous copiez un lien Dropbox, vérifiez qu’il pointe directement vers le fichier vidéo lui-même (l’URL doit contenir .mp4), car selon l’endroit de l’interface Dropbox où vous les utilisez, les boutons « Share »/« Copy Link » de Dropbox renvoient parfois vers un dossier entier.

Appliquer en masse des URL de fichiers vidéo. Comme pour les autres réglages de calque, vous pouvez appliquer votre réglage d’URL de fichier vidéo à plusieurs calques à la fois avec la fonctionnalité d’application en masse.

Remplacer des vidéos et des animations Lottie à partir d’un tableur. Vous pouvez aussi remplacer les médias intégrés pour chaque ligne du tableur lors de l’export grâce au workflow des variantes, avec des URL directes .mp4, .webm ou .json, ou des fichiers .mp4, .webm ou .json correspondants inclus dans une source ZIP importée.

Limitez le poids total des vidéos intégrées à 4 Mo pour éviter que votre bannière publicitaire soit bloquée par la mise à jour de la politique de Chrome sur les annonces lourdes.