Un embed YouTube avec une largeur et une hauteur fixes paraît correct sur l’écran où vous l’avez conçu, mais se casse sur tous les autres. Voici comment le faire s’adapter correctement à la place.
Le problème du dimensionnement fixe
Le code d’intégration par défaut de YouTube définit une largeur et une hauteur en pixels fixes, par exemple 560 sur 315. Sur un grand moniteur de bureau, cela peut paraître petit ; sur un écran de téléphone étroit, cela peut déborder entièrement de la page, forçant le visiteur à faire défiler horizontalement. Ni l’un ni l’autre n’est une bonne expérience.
La technique du padding-bottom
La solution classique consiste à placer l’iframe dans un conteneur dimensionné à l’aide d’un padding-bottom en pourcentage plutôt qu’une hauteur fixe, et à positionner l’iframe en absolu pour remplir ce conteneur :
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>Le 56,25 % vient de la division de 9 par 16, le ratio d’aspect vidéo standard. Comme la largeur du conteneur est définie à 100 % de son parent, et que sa hauteur est calculée en pourcentage de cette largeur, la boîte conserve une forme 16:9 parfaite, quelle que soit la largeur de la page environnante.
La version Shorts
Les vidéos verticales, comme les YouTube Shorts, utilisent le ratio inverse. Remplacez le padding-bottom par 177,78 % (16 divisé par 9), et la même technique conserve une forme 9:16 correcte à la place.
Une alternative moderne plus simple
Le CSS actuel prend en charge directement la propriété aspect-ratio, qui peut remplacer l’astuce du padding-bottom sur les navigateurs qui la supportent :
<div style="width:100%;aspect-ratio:16/9;">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>C’est plus court et plus facile à lire, même si la méthode du padding-bottom reste le choix par défaut le plus sûr si vous devez prendre en charge d’anciens navigateurs.
Bien tester le résultat
Redimensionnez la fenêtre de votre navigateur, plus étroite puis plus large, pendant que l’embed est affiché (ou utilisez la barre d’outils appareil de votre navigateur pour simuler un téléphone) et vérifiez que le lecteur s’adapte de façon fluide, sans bandes noires, sans débordement et sans déformation. C’est exactement le genre de vérification à effectuer avant de publier une page contenant une vidéo intégrée.
Se passer du CSS manuel
Notre générateur de code d’intégration produit automatiquement un conteneur responsive correctement proportionné, y compris la version 9:16 pour les Shorts, afin que vous n’ayez pas à retenir ces pourcentages vous-même.