Ce que c'est
Un iframe est une façon d'intégrer le contenu d'une page web à l'intérieur d'une autre — c'est ce qui permet de déposer une vidéo YouTube, une carte Google Maps ou un widget tiers directement sur ta propre page sans avoir à construire cette fonctionnalité toi-même. La plupart des codes d'intégration que tu copies-colles depuis ces services arrivent déjà avec une largeur et une hauteur fixes en pixels, dimensionnées pour un écran de bureau classique.
Cette vérification examine si les iframes intégrés sur une page sont configurés pour se redimensionner avec l'écran ("responsive"), ou s'ils restent à cette taille fixe d'origine quelle que soit la largeur réelle de l'écran du visiteur.
Pourquoi c'est important
Une carte ou une vidéo intégrée à une taille fixe de, par exemple, 560×315 pixels fonctionne bien sur un écran de bureau mais peut facilement être plus large que l'écran entier d'un téléphone, provoquant le même type de défilement horizontal ou étant carrément coupée visuellement. C'est un problème courant et facile à manquer, précisément parce que le code d'intégration est généralement déjà écrit par la plateforme (YouTube, Google Maps) tel quel, sans indication évidente qu'il nécessite un ajustement supplémentaire pour un usage mobile.
Une intégration cassée est aussi disproportionnellement visible comparée à un petit problème de texte — une carte coupée en deux ou un lecteur vidéo qui déborde de l'écran est immédiatement et visuellement évident pour tout visiteur qui fait défiler jusqu'à cette partie de la page sur son téléphone.
Comment le corriger
- Identifie chaque iframe intégré sur ton site — le plus souvent des vidéos, des cartes ou des widgets tiers — et vérifie comment ils s'affichent sur un vrai téléphone.
- Enveloppe l'iframe dans un conteneur stylé pour contrôler sa largeur en pourcentage, avec l'iframe lui-même réglé pour remplir ce conteneur (
width: 100%) plutôt que d'utiliser sa largeur fixe d'origine en pixels. - Pour les intégrations YouTube en particulier, une approche courante consiste en un conteneur à ratio d'aspect fixe (comme 16:9) qui redimensionne la vidéo proportionnellement à n'importe quelle largeur d'écran — de nombreux extraits de code gratuits existent pour ce motif précis.
- Si tu utilises un créateur de site, vérifie s'il propose un bloc "intégration" ou "vidéo" intégré plutôt que du code iframe brut — ceux-ci sont généralement déjà responsives par défaut.
- Revérifie l'intégration sur un téléphone ensuite pour confirmer qu'elle se redimensionne correctement plutôt que de déborder.