Une ligne dans functions.php, et le problème disparaît. C’est souvent le cas avec les fonctionnalités de thème que WordPress embarque depuis des années sans que personne ne pense à les activer : elles existent, elles sont documentées, mais elles restent ignorées au profit de correctifs CSS bricolés à la main.
Le cas des vidéos collées dans le contenu en est un exemple typique. Un rédacteur colle une URL YouTube ou Vimeo dans l’éditeur, WordPress la transforme automatiquement en lecteur intégré grâce aux oEmbeds, et sur mobile la vidéo déborde du conteneur ou s’affiche avec des bandes noires disgracieuses. La tentation est grande d’écrire un bloc de media queries pour chaque taille d’écran. Il existe une solution plus courte.
Le problème concret
Sans intervention, un embed YouTube collé dans un article génère un <iframe> avec des attributs width et height fixes, hérités des dimensions par défaut de la plateforme source. Sur un écran large, cela peut paraître acceptable. Sur un smartphone en portrait, l’iframe déborde du conteneur de contenu, casse la mise en page et oblige l’utilisateur à faire défiler horizontalement pour voir l’intégralité de la vidéo.
La réponse la plus répandue consiste à cibler l’iframe en CSS avec un conteneur en position: relative et un padding-bottom calculé en pourcentage pour simuler le ratio 16:9. Cette technique fonctionne, mais elle demande de dupliquer les règles pour chaque ratio possible (16:9, 4:3, carré) et de les maintenir à chaque changement de thème.
La fonctionnalité native de WordPress
Depuis plusieurs versions, WordPress propose un support de thème dédié à ce problème précis : responsive-embeds. Une fois déclaré, WordPress applique automatiquement des règles CSS internes qui enveloppent les embeds vidéo dans un conteneur fluide et préservent leur ratio d’aspect, sans qu’aucune ligne de CSS ne soit nécessaire côté thème.
La déclaration se fait dans le fichier functions.php du thème, généralement accrochée au hook after_setup_theme aux côtés des autres déclarations de support :
function monsite_setup_theme() {
add_theme_support( 'responsive-embeds' );
}
add_action( 'after_setup_theme', 'monsite_setup_theme' );
Cette seule instruction suffit. WordPress détecte les embeds générés par le système oEmbed (YouTube, Vimeo, Dailymotion, SoundCloud parmi les fournisseurs les plus courants) et leur applique un style de conteneur fluide en coulisses, via les feuilles de style internes du cœur.
Ce que cela change réellement
Concrètement, WordPress enveloppe l’iframe généré dans un élément portant la classe wp-embed-aspect-16-9 (ou le ratio détecté à partir des dimensions natives de la vidéo), avec des règles CSS qui utilisent aspect-ratio côté navigateurs modernes et un mécanisme de repli en padding-bottom pour les navigateurs plus anciens. Le rédacteur n’a rien à faire de particulier : il colle son URL, et le rendu s’adapte.
- Aucune classe CSS à ajouter manuellement dans l’éditeur
- Le ratio d’aspect est calculé à partir des dimensions réelles renvoyées par l’oEmbed
- Le support fonctionne aussi bien dans l’éditeur de blocs que dans l’ancien éditeur classique
- Aucune dépendance à une extension tierce
Les limites à connaître
Ce support ne couvre que les embeds générés via le système oEmbed natif de WordPress. Une vidéo intégrée manuellement avec un <iframe> collé directement dans un bloc HTML personnalisé, en dehors du flux oEmbed, ne bénéficie pas de ce traitement automatique. Dans ce cas, il reste nécessaire d’ajouter la classe wp-has-aspect-ratio ou d’écrire une règle CSS spécifique pour ce cas particulier.
Autre point d’attention : ce support agit sur le rendu du contenu, pas sur le poids des ressources chargées. Une vidéo intégrée reste une iframe tierce avec son propre JavaScript ; pour les enjeux de performance, un chargement différé au clic (avec une image de prévisualisation statique) reste une option à envisager séparément, hors du périmètre de cette seule fonctionnalité.
Vérifier que le support est bien actif
Pour confirmer que la fonctionnalité est bien prise en compte, il suffit d’inspecter le HTML généré autour d’un embed vidéo collé dans un article publié. La présence d’un conteneur avec une classe commençant par wp-embed-aspect- confirme que WordPress a appliqué son traitement responsive. Si cette classe est absente, il faut vérifier que l’appel à add_theme_support( 'responsive-embeds' ) est bien exécuté avant le hook wp_head, et qu’aucune extension de mise en cache agressive ne sert une version HTML générée avant l’activation du support.
Sur les projets où ce support de thème est oublié, on retrouve presque toujours le même schéma : un fichier CSS qui grossit article après article pour compenser un cas particulier de ratio vidéo. Autant régler le problème une bonne fois avec la fonctionnalité native.
En résumé
Le support de thème responsive-embeds illustre bien une classe de problèmes récurrents : une solution existe déjà dans le cœur de WordPress, mais elle reste ignorée faute d’être connue. Une seule ligne dans functions.php remplace un bloc entier de CSS maison, garantit un comportement cohérent sur l’ensemble du contenu existant et futur, et évite la maintenance d’une règle par ratio de vidéo. Pour tout thème qui gère du contenu éditorial riche, cette déclaration mérite de figurer parmi les premiers réglages du fichier de configuration du thème, aux côtés de post-thumbnails et title-tag.
