Une intégration YouTube avec une largeur et une hauteur fixes est correcte sur l’écran où vous l’avez conçue, et inadaptée sur tout autre écran. Voici comment la rendre vraiment responsive.
La technique du padding-bottom
La solution classique place l’iframe dans un conteneur avec un padding-bottom basé sur un pourcentage plutôt qu’une hauteur fixe :
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">n <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>n</div>Le chiffre 56,25 % vient de 9 divisé par 16, le ratio d’image standard des vidéos. Pour les vidéos verticales de type Shorts, utilisez plutôt 177,78 % (16 divisé par 9).
Une alternative plus moderne
Le CSS actuel prend également en charge la propriété aspect-ratio directement, plus courte sur les navigateurs compatibles :
<div style="width:100%;aspect-ratio:16/9;">n <iframe src="..." style="width:100%;height:100%;border:0;" allowfullscreen></iframe>n</div>Tester soi-même
Réduisez et agrandissez la fenêtre de votre navigateur pendant que l’intégration est visible, et vérifiez que le lecteur s’adapte sans bandes noires ni déformation.
Sans CSS manuel
Notre générateur de code d’intégration crée automatiquement un conteneur responsive correctement proportionné, y compris la version 9:16 pour les Shorts.