# Média

Le bloc **Média** affiche une image ou une vidéo, avec sa légende. Cette page décrit le choix du fichier, le texte alternatif, le cadrage par écran, les modes de lecture d’une vidéo, ses sous-titres et son lien.

## Ajouter un média

1. Dans l’éditeur, ouvrez l’inserteur et choisissez **Média**, ou cherchez `image`, `photo`, `vidéo` ou `gif`. [Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/) détaille les façons d’insérer un bloc.
2. Cliquez sur **Cliquez pour choisir un média, ou déposez-en un ici.** pour prendre un fichier de la médiathèque ou en envoyer un. Le bloc accepte les images et les vidéos.
3. Sans photo à vous, cliquez sur **Chercher sur Pexels**. [Trouver une photo sur Pexels](https://lovelyrender.com/fr/documentation/pexels/) décrit la recherche et l’import.
4. Dans l’onglet **Réglages**, décrivez l’image dans le champ **Texte alternatif**.

Pendant l’envoi, **Envoi en cours…** remplace l’aperçu. Pour changer de fichier, cliquez sur **Remplacer** dans la barre d’outils du bloc. Le bouton **Pexels** de la même barre ouvre la recherche de Pexels.

Pour une légende, insérez un paragraphe ou un titre à l’intérieur du bloc : il est publié sous l’image et rattaché à elle. [Créditer vos photos et vos vidéos](https://lovelyrender.com/fr/documentation/credits/) explique comment y afficher l’auteur du média.

Une galerie se compose avec un [Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/) en **Grille** rempli de blocs Média.

## Panneau Média

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Image décorative** | Marque l’image comme sans fonction et sans information propre. Le texte alternatif disparaît et les lecteurs d’écran sautent l’image. | Désactivé |
| **Texte alternatif** | La description lue par les lecteurs d’écran et par les moteurs de recherche. Le modifier ici ne change que ce bloc. | Le texte alternatif du fichier dans la médiathèque |
| **Taille maximale** | La plus grande version de l’image que le site peut servir, parmi celles créées pour ce fichier. Dans cette limite, le site sert la plus adaptée à l’écran. | L’original |
| **Habiller le texte selon la forme** | Le texte voisin suit le contour du dessin. Pour un fichier SVG seulement. La légende est alors désactivée. | Désactivé |
| **Marge d’habillage** | L’espace entre la forme et le texte, pris dans l’échelle d’espacement du site. | Aucune |
| **SVG en ligne** | Écrit le dessin SVG dans la page au lieu de l’afficher comme une image. Utile pour un SVG animé. Pour un fichier SVG seulement. | Désactivé |

![Le panneau Média d’une photo : Image décorative désactivée, le Texte alternatif qui décrit les rangs de vignes du domaine, puis la Taille maximale sur Original (1600 x 1067 px).](https://static.lovelyrender.com/uploads/2026/10/881-doc-blocs-media.png)

Un SVG en ligne prend la couleur du texte du bloc là où le fichier la demande. Il peut s’animer avec l’effet **Tracer** de l’onglet **Animations**. Il n’a pas de texte alternatif : le panneau affiche **Le texte alternatif n’existe pas pour un SVG en ligne, qui est décoratif par nature.** Une image qui porte une information reste une image.

Sans fichier, le panneau propose une **Animation au défilement** : une suite d’images que le visiteur parcourt en faisant défiler la page. [Animer au défilement](https://lovelyrender.com/fr/documentation/animations-au-defilement/) la décrit.

## Panneau Réglages de l’image

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Comportement** | **Par défaut** : la taille naturelle. **Proportionnel** : l’image tient dans son conteneur en gardant ses proportions. **Couvrir** : elle remplit tout le cadre, quitte à être recadrée. **Contenir** : elle est entière, quitte à laisser des marges. | **Proportionnel** |
| Point focal, **Horizontale**, **Verticale** | En **Couvrir** ou **Contenir**, le point de l’image gardé au centre du cadrage, par une grille de neuf cases ou en pourcentages. Réglable écran par écran. | Le centre |
| **Largeur** | Une largeur forcée en pixels. Vide, la largeur est automatique. | Vide |
| **Hauteur** | Une hauteur forcée en pixels. Vide, la hauteur est automatique. | Vide |

En **Proportionnel**, une seule dimension se règle à la fois : l’autre se calcule. En **Couvrir** ou **Contenir**, une dimension forcée affiche un avertissement qui rappelle que l’image sera recadrée ou entourée de marges.

![Le panneau Réglages de l’image : Comportement sur Couvrir, l’onglet Mobile choisi parmi les écrans, la grille du point focal sur la case de gauche, Horizontale à 0 % et Verticale à 50 %.](https://static.lovelyrender.com/uploads/2026/10/236-images-cadrage.png)

Le point focal d’un écran l’emporte sur celui de l’onglet **Ensemble**, même quand il revient au centre. Un écran sans point focal propre reprend celui de l’onglet **Ensemble**.

## Panneau Réglages de la vidéo

Quand le fichier est une vidéo, le panneau **Réglages de la vidéo** s’ouvre dans le panneau **Média**. Son premier réglage, **Lecture**, commande les autres.

| Valeur de Lecture | Comportement |
| --- | --- |
| **Manuelle** (par défaut) | Le visiteur lance la vidéo depuis son lecteur. Les quatre réglages suivants s’appliquent tels que vous les posez. |
| **Une seule fois, à l’apparition** | La vidéo démarre seule quand elle arrive à l’écran, sans lecteur ni son. Elle s’arrête à la fin et ne rejoue pas. |
| **En boucle tant qu’elle est visible** | La vidéo tourne en boucle, sans lecteur ni son, se met en pause quand elle quitte l’écran et reprend quand elle y revient. |
| **Au survol** | La vidéo se lit quand le pointeur entre sur elle, ou sur le lien ou la carte qui la contient. Elle revient à son début quand il en sort. Atteindre ce lien au clavier la lance. Sur un écran sans souris, elle tourne en boucle tant qu’elle est visible. |
| **Suit le défilement** | La vidéo avance et recule au rythme du défilement de la page. Voir [Animer au défilement](https://lovelyrender.com/fr/documentation/animations-au-defilement/). |

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Afficher un bouton de pause** | Pose sur la vidéo un bouton qui permet au visiteur de l’arrêter. En **En boucle tant qu’elle est visible** et **Au survol** seulement. | Activé |
| **En boucle** | Relance la vidéo à la fin. | Désactivé |
| **Sans le son** | Coupe le son. | Désactivé |
| **Commandes du lecteur** | Affiche les commandes de lecture, dont le menu des sous-titres. | Activé |
| **Préchargement** | Les données que le navigateur télécharge avant la lecture : **Auto**, **Métadonnées** ou **Aucun**. | **Métadonnées** |
| **Image de couverture** | L’image affichée avant la lecture. **Utiliser l’image par défaut** revient à la vignette créée par le site. | La vignette créée par le site |

![Le panneau Réglages de la vidéo : Lecture sur En boucle tant qu’elle est visible, le bandeau Le mode de lecture commande les réglages ci-dessous, Afficher un bouton de pause activé, puis En boucle, Sans le son et Commandes du lecteur grisés.](https://static.lovelyrender.com/uploads/2026/10/182-blocs-video.png)

Dans les quatre modes sans lecteur, **En boucle**, **Sans le son**, **Commandes du lecteur** et **Préchargement** se grisent. Ils montrent la valeur imposée : pas de commandes, son coupé et **Aucun** préchargement. Le fichier n’est téléchargé qu’au moment où la vidéo devient visible, ou au premier survol. Revenir en **Manuelle** rend les réglages que vous aviez posés.

Le bouton de pause est un rond posé en bas à droite de la vidéo. Le visiteur qui l’enfonce arrête la vidéo jusqu’à ce qu’il appuie de nouveau, même s’il quitte la section et revient. Les lecteurs d’écran l’annoncent **Mettre la vidéo en pause**.

**Attention :** Une vidéo qui bouge seule plus de cinq secondes doit pouvoir être arrêtée. Sans bouton de pause, le panneau l’écrit et le panneau **Accessibilité** le signale. Réservez **Une seule fois, à l’apparition** à un plan court, muet et sans information.

## Ajouter des sous-titres

La section **Sous-titres et pistes de texte** termine le panneau **Réglages de la vidéo**. Une piste est un fichier WebVTT (`.vtt`) proposé dans le menu du lecteur. Le visiteur l’active s’il le veut : elle n’est jamais imposée.

1. Dans la section **Sous-titres et pistes de texte**, cliquez sur **Ajouter une piste de texte**. La médiathèque s’ouvre sur les fichiers `.vtt`.
2. Choisissez ou envoyez le fichier. Une carte au nom du fichier apparaît dans la section.
3. Réglez sa **Nature**, son **Nom affiché dans le lecteur** et son **Code de langue**, par exemple `fr`.

| Nature | Contenu | Public |
| --- | --- | --- |
| **Sous-titres sourds et malentendants (même langue, sons compris)** | Les dialogues dans la langue de la vidéo et les sons qui portent du sens. Nature choisie par défaut. | Les personnes sourdes ou malentendantes. |
| **Sous-titres (traduction)** | La traduction des dialogues. | Les visiteurs qui ne comprennent pas la langue parlée. |
| **Audiodescription (écrite)** | La description de ce qui est montré à l’écran. | Les personnes aveugles ou malvoyantes. |

![La section Sous-titres et pistes de texte avec deux pistes : domaine-description-fr.vtt en Audiodescription (écrite), nommée Description (français), code fr, puis domaine-description-en.vtt nommée Description (English).](https://static.lovelyrender.com/uploads/2026/10/239-images-pistes.png)

Tant qu’une piste n’a pas son code de langue et son nom, le panneau affiche **Donnez à chaque piste un code de langue et un nom : le menu du lecteur n’affiche rien d’autre.** **Retirer cette piste** la détache de la vidéo. Le fichier reste dans la médiathèque.

**Remarque :** Les pistes passent par le menu du lecteur : personne ne peut les ouvrir sans **Commandes du lecteur** ni dans les modes sans lecteur. Elles appartiennent au bloc. La même vidéo posée ailleurs arrive sans ses pistes.

## Panneau Avancé

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Ancre HTML** | Un identifiant pour pointer ce bloc avec une adresse terminée par `#`. | Vide |
| **Chargement différé** | Le média ne se charge qu’à l’approche de l’écran. Désactivez-le pour la grande image visible dès l’arrivée sur la page. | Activé |

## Panneau Lien

Le panneau **Lien** rend l’image ou la vidéo cliquable. Ses réglages sont ceux de tous les blocs qui portent un lien ; [Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/) les détaille. Un lien vers un fichier de la médiathèque s’ouvre toujours en surimpression : une vignette s’agrandit sans quitter la page.

**Attention :** Sur une image cliquable, remplissez le **Nom accessible** du panneau **Lien**. Le texte alternatif décrit l’image et le nom accessible dit où mène le clic, par exemple « Voir le détail du fauteuil ».

## Onglet Styles

Le média se règle dans les états **Par défaut**, **Survol** et **Actif**. Il porte dès son insertion le style **Image**, qui ne pose rien : il sert à donner la même allure à tous les médias du site. La partie **Images** du catalogue de design propose quatre allures : **Brut**, **Arrondi**, **Ombré** ou **Cadre** ([Adopter un design du catalogue](https://lovelyrender.com/fr/documentation/catalogue-de-design/)).

| Panneau | Guide |
| --- | --- |
| **Couleurs** | [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/) |
| **Images de fond** | [Poser un arrière-plan](https://lovelyrender.com/fr/documentation/arriere-plans/) |
| **Typographie** | [Mettre en forme un texte](https://lovelyrender.com/fr/documentation/typographie/), pour la légende. |
| **Taille et espacement**, **Bordures**, **Effets**, **Transitions** | [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/) |

Une bordure, des coins arrondis ou une ombre se posent sur l’image et la rognent à ses coins. La légende reste dessous, hors du cadre.

## Onglet Animations

L’onglet **Animations** fait apparaître ou bouger le média. Le mode **Suit le défilement** y pose une animation **Suit le défilement**. [Animer un bloc](https://lovelyrender.com/fr/documentation/animations/) décrit les effets.

## Sur téléphone

- Le site crée plusieurs largeurs de chaque image : 480, 960 et 1 560 pixels, plus l’original. Le navigateur prend la plus petite qui reste nette sur l’écran du visiteur, sans dépasser la **Taille maximale**.
- Le point focal se règle par écran : le cadrage d’une photo peut garder un visage sur téléphone et un paysage sur ordinateur.
- Sur un téléphone, une vidéo **Au survol** tourne en boucle tant qu’elle est visible, avec son bouton de pause.
- Un visiteur qui a demandé à réduire les animations voit l’**Image de couverture** à la place des vidéos qui se lancent seules.

[Envoyer vos photos et vos vidéos](https://lovelyrender.com/fr/documentation/images-et-videos/) décrit les formats que le site prépare pour chaque fichier.

## Accessibilité

- Une image qui porte une information a un **Texte alternatif**. Une image décorative est marquée **Image décorative** : elle est sautée par les lecteurs d’écran.
- La légende est rattachée à l’image pour les lecteurs d’écran et les moteurs de recherche.
- Le panneau **Accessibilité** de l’éditeur signale une image sans texte alternatif. Il signale une vidéo sans sous-titres en lecture **Manuelle**, une vidéo sans bouton de pause et une vidéo sans lecteur qui porte des pistes.

[Vérifier l’accessibilité de vos pages](https://lovelyrender.com/fr/documentation/accessibilite/) décrit chaque constat.

## Limites

- Le bloc accepte les images et les vidéos. Pour un PDF, utilisez le bloc [Document PDF](https://lovelyrender.com/fr/documentation/bloc-pdf/) ; pour une vidéo hébergée chez un fournisseur, le bloc [Intégration](https://lovelyrender.com/fr/documentation/bloc-embed/).
- Aucune vidéo ne démarre au chargement de la page : les lectures automatiques attendent que la vidéo soit visible.
- Une image collée depuis un autre site arrive vide, avec son texte alternatif : le fichier reste sur le site d’origine.
- Le lecteur ne lit que les pistes au format WebVTT (`.vtt`) : un fichier `.srt` n’est pas lu.

## Voir aussi

- [Envoyer vos photos et vos vidéos](https://lovelyrender.com/fr/documentation/images-et-videos/)
- [Trouver une photo sur Pexels](https://lovelyrender.com/fr/documentation/pexels/)
- [Créditer vos photos et vos vidéos](https://lovelyrender.com/fr/documentation/credits/)
- [Animer au défilement](https://lovelyrender.com/fr/documentation/animations-au-defilement/)