Un hero doit rester convaincant lorsque l’éditeur ajoute une vidéo, préfère une photo ou ne renseigne aucun média. La logique proposée pour Phoenix est explicite : une vidéo YouTube valide prend la priorité, puis une photo disponible. Sur l’accueil seulement, une illustration SVG peut servir de dernier recours.
Cette règle concerne le choix du média. Elle ne dépend pas de la quantité de texte ou de la présence d’un bouton.
Définir les trois états avant le HTML
Commencez par déterminer le type de média, puis affichez un seul état. Cette méthode évite une photo à côté d’une vidéo alors que le design prévoit un visuel unique.
{% set media_type = youtube_id is not empty
? 'video'
: (hero_image.0|default('') is not empty
? 'photo'
: (home_hero ? 'svg' : '')) %}
youtube_id, hero_image et home_hero doivent être calculés auparavant. Le kit téléchargeable contient les fichiers associés ; cet extrait montre uniquement la décision finale.
Pour une page intérieure sans média, ne créez pas une colonne vide de la même largeur qu’une image. Une classe conditionnelle sur la grille permet au texte d’utiliser l’espace prévu pour cet état.
Valider le lien YouTube
Un champ URL ne constitue pas à lui seul une validation du fournisseur. Reconnaissez les hôtes attendus, extrayez l’identifiant vidéo, puis vérifiez sa forme avant de construire l’URL d’intégration.
Les exemples prennent en charge les liens watch, youtu.be, embed, shorts et live. Une adresse qui ressemble à YouTube mais utilise un autre domaine ne doit pas être intégrée. Un lien invalide laisse place à la photo ou à l’état sans média.
Construisez ensuite l’iframe à partir de l’identifiant reconnu, plutôt que d’injecter le contenu complet du champ dans un attribut src.
<iframe
src="https://www.youtube-nocookie.com/embed/{{ youtube_id|e('html_attr') }}"
title="{{ title|striptags|e('html_attr') }} — présentation vidéo"
width="640" height="360"
loading="lazy"
allow="encrypted-media; picture-in-picture; fullscreen"
allowfullscreen></iframe>
Le domaine d’intégration présenté ici ne dispense pas d’évaluer le comportement des services tiers et la politique de consentement du site. Le besoin d’un chargement après accord doit être traité dans l’installation concernée.
Prévoir la lecture et l’accessibilité
Donnez un titre précis à l’iframe. Le titre visible de la page ne remplace pas toujours l’explication du contenu de la vidéo. Si elle apporte une information essentielle, proposez aussi un texte ou une transcription utile.
Évitez une lecture automatique sonore. Un visiteur doit pouvoir poursuivre la page sans être obligé de regarder le média. La description et le bouton doivent conserver leur sens lorsque l’intégration est indisponible.
Sur mobile, utilisez un conteneur qui conserve le ratio de la vidéo. Vérifiez qu’il ne déborde pas et qu’il laisse une place confortable aux actions principales.
Contrôler la photo et son état absent
Une référence de média peut exister alors que l’image a été supprimée. Contrôlez donc le résultat de la_photo(), pas uniquement la valeur du champ.
Préservez les dimensions de l’image et son texte alternatif lorsqu’elle est informative. La photo principale située au-dessus de la ligne de flottaison ne devrait pas être chargée tardivement par réflexe. Les visuels plus bas peuvent utiliser un chargement différé.
Le guide des images explique la différence entre texte alternatif, légende et nom du média.
Tester la matrice complète
Essayez une vidéo valide avec et sans photo, une photo seule, un média supprimé et une adresse vidéo invalide. Répétez l’exercice pour l’accueil et pour une page intérieure.
Dans la convention du design d’exemple, design = 1 désigne le hero d’accueil. Il s’agit d’une règle de présentation documentée ; elle ne remplace pas le réglage WordPress de la page d’accueil.
Le bon résultat est une seule présentation cohérente par état, sans lien d’intégration arbitraire et sans espace vide lorsque le média manque.
