---
title: "Images, vidéos et icônes"
description: "Ajoutez des éléments image, vidéo et icône à un écran dans le Flow Builder, et remplacez les médias à l'exécution avec des identifiants personnalisés."
---

Le Flow Builder propose trois types d'éléments médias dans la catégorie **Media** : Image, Video et Icon.

:::tip
Pour qu'une image ou une vidéo couvre tout l'écran — y compris les zones derrière l'encoche et l'indicateur d'accueil — positionnez-la en fixe avec tous les décalages à 0 et sélectionnez **Ignore safe area**. Voir [Mise en page et positionnement](manage-paywall-ui-elements#ignore-safe-area).
:::

## Image \{#image\}

Importez un fichier `.JPG`, `.PNG` ou `.WEBP` de 20 Mo maximum.

Les GIFs et WEBP animés ne sont pas pris en charge. Pour ajouter du mouvement, utilisez plutôt un élément [Video](#video).

- **Aspect** — contrôle comment l'image s'adapte à son conteneur :
  - **Fit** — redimensionne l'image pour qu'elle tienne dans le conteneur sans recadrage.
  - **Fill** — étire l'image pour remplir le conteneur.
  - **Cover** — redimensionne l'image pour couvrir le conteneur, en recadrant si nécessaire. Par défaut.
- **Use custom media ID** — voir [Custom media ID](#custom-media-id) ci-dessous.

## Vidéo \{#video\}

Importez un fichier `.MP4` ou `.WEBM` de 50 Mo maximum et d'une durée maximale de 30 secondes. La résolution minimale est de 640x640 pixels.

- **Aspect** — Fit, Fill ou Cover. Fill par défaut.
- **Loop** — rejouer la vidéo en boucle. Activé par défaut.
- **Use custom media ID** — voir [Custom media ID](#custom-media-id) ci-dessous.

Les vidéos ne sont pas lues dans l'aperçu de l'éditeur — le canevas affiche une image fixe. Sur l'appareil au moment de l'exécution, la vidéo est lue sans son par défaut. Avec Loop activé, elle se répète indéfiniment.

### Déclencher une action à la fin de la vidéo \{#trigger-an-action-when-the-video-ends\}

:::link
Article principal : [Actions](onboarding-actions)
:::

L'élément Vidéo prend en charge un déclencheur **On playback finished** qui s'active lorsque la vidéo arrive à sa fin. Configurez-le dans le panneau **Interactions** pour naviguer vers un autre écran, afficher un CTA ou exécuter toute autre action.

## Icône \{#icon\}

Choisissez parmi la bibliothèque [Tabler Icons](https://tabler.io/icons) intégrée, qui propose des milliers d'icônes en deux styles visuels :

- **Stroke** — contour uniquement.
- **Filled** — remplissage plein.

Recherchez une icône dans le sélecteur par mot-clé. Définissez la couleur de l'icône dans le sélecteur **Color** — choisissez un [style de couleur](builder-styling) enregistré ou définissez une couleur personnalisée.

## Localiser les médias \{#localize-media\}

:::link
Article principal : [Ajouter une locale](add-paywall-locale-in-adapty-paywall-builder)
:::

Les éléments Image et Vidéo peuvent contenir un fichier différent par locale. Activez la locale cible, sélectionnez l'élément, puis téléchargez le fichier localisé dans le panneau des propriétés. Les locales sans fichier propre affichent le fichier de la locale par défaut.

### Limitations \{#limitations\}

Vous ne pouvez pas localiser les éléments suivants :

- Les icônes
- Les arrière-plans d'écran
- Les identifiants de médias personnalisés

## ID média personnalisé \{#custom-media-id\}

:::important
Vous pouvez également définir un ID média personnalisé pour une image et une vidéo en [arrière-plan](paywall-head-picture).
:::

Associez un ID média personnalisé à un élément image ou vidéo pour le remplacer au moment de l'exécution depuis le code de votre application. Utilisez cette fonctionnalité pour des [visuels personnalisés](get-pb-paywalls#customize-assets) — par exemple, pour afficher l'avatar choisi par l'utilisateur.

Le média que vous importez dans le Flow Builder sert de secours. Si votre code ne fournit pas de média pour cet ID au moment de l'exécution, c'est le média de secours qui s'affiche.

Pour activer un ID média personnalisé sur un élément Image ou Vidéo :

1. Cochez la case **Use custom media ID** sous la zone de téléchargement.
2. Saisissez un identifiant de média.
3. Téléchargez une image ou vidéo de secours.

Dans le code de votre application, récupérez le média par son identifiant — consultez [Personnaliser les assets](get-pb-paywalls#customize-assets) pour l'API SDK.