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
- Dans l’éditeur, ouvrez l’inserteur et choisissez Média, ou cherchez
image,photo,vidéoougif. Ajouter un bloc détaille les façons d’insérer un bloc. - 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.
- Sans photo à vous, cliquez sur Chercher sur Pexels. Trouver une photo sur Pexels décrit la recherche et l’import.
- 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 explique comment y afficher l’auteur du média.
Une galerie se compose avec un 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é |
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 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 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. |
| 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 |
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.
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.
- 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. - Choisissez ou envoyez le fichier. Une carte au nom du fichier apparaît dans la section.
- 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. |
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.
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 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.
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).
| Panneau | Guide |
|---|---|
| Couleurs | Colorer un bloc |
| Images de fond | Poser un arrière-plan |
| Typographie | Mettre en forme un texte, pour la légende. |
| Taille et espacement, Bordures, Effets, Transitions | Régler la taille, les bordures et les 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 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 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 décrit chaque constat.
Limites
- Le bloc accepte les images et les vidéos. Pour un PDF, utilisez le bloc Document PDF ; pour une vidéo hébergée chez un fournisseur, le bloc Intégration.
- 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.srtn’est pas lu.