Qu’est-ce que le ratio d’aspect ?

Le ratio d’aspect décrit la forme d’une image vidéo comme un rapport largeur/hauteur. Presque toutes les vidéos YouTube standards sont tournées et publiées en 16:9 (écran large), tandis que les Shorts sont tournées et publiées en 9:16 (vertical).

Pourquoi c’est important pour l’intégration

Si la largeur et la hauteur d’un lecteur ne correspondent pas au ratio d’aspect réel de la vidéo, on obtient des bandes noires ou une image étirée et rognée. Une intégration responsive conserve le bon ratio à toute taille en utilisant un conteneur basé sur un pourcentage (56,25 % de padding-bottom pour du 16:9, 177,78 % pour du 9:16) plutôt que des dimensions en pixels fixes.

Obtenir le bon ratio automatiquement

Le générateur de code d’intégration bascule automatiquement son conteneur responsive entre 16:9 et 9:16 lorsque vous activez le format Shorts, vous n’avez donc pas besoin de calculer le pourcentage de padding à la main.

Comment le ratio d’aspect s’exprime en code

Le ratio d’aspect s’écrit habituellement sous forme de deux nombres séparés par deux points, décrivant la largeur par rapport à la hauteur : 16:9 signifie que la largeur vaut 16 unités pour 9 unités de hauteur, quelle que soit la taille réelle en pixels. C’est pourquoi une vidéo en 1280×720 et une version en 640×360 du même contenu partagent le même ratio 16:9 : les deux se simplifient à la même proportion. En CSS, cette même idée apparaît soit sous forme de pourcentage (56,25 %, soit 9 divisé par 16), utilisé dans la technique classique d’intégration responsive, soit directement via la propriété moderne aspect-ratio, écrite aspect-ratio:16/9.

Un exemple concret

Imaginez une page de galerie photo mélangeant des vidéos YouTube classiques et des Shorts. Utiliser une seule taille d’intégration fixe pour les deux rognerait maladroitement les Shorts verticales dans une boîte large, ou réduirait les vidéos grand écran pour tenir dans une boîte étroite. La solution consiste à appliquer le bon ratio d’aspect selon le type de vidéo : un conteneur 16:9 pour les vidéos classiques, et un conteneur séparé 9:16 spécifiquement pour les Shorts, chacun réservant la bonne forme d’espace avant même que la vidéo ne se charge.

Ratio d’aspect contre résolution

Ratio d’aspect et résolution sont des notions liées mais distinctes, et les confondre est une source fréquente de confusion. La résolution est le nombre réel de pixels (1920×1080, par exemple) ; le ratio d’aspect est la proportion à laquelle ces chiffres se réduisent (16:9 dans ce cas). Deux vidéos peuvent partager une résolution mais avoir des ratios d’aspect différents si l’une a été mise en boîte aux lettres, et deux vidéos peuvent partager un ratio d’aspect à des résolutions totalement différentes : un aperçu en 640×360 et une version complète en 1920×1080 sont tous deux en 16:9. Lors de la construction d’une intégration responsive, c’est le ratio d’aspect, pas la résolution précise, qui détermine les proportions du conteneur.

Un mauvais ratio est l’une des erreurs d’intégration les plus visibles, car elle produit immédiatement des bandes noires ou une image étirée et déformée, contrairement à des problèmes plus subtils comme un paramètre de confidentialité manquant.

Un moyen rapide de vérifier que le ratio est correct avant de publier consiste à prévisualiser l’intégration à la fois sur une large largeur de bureau et sur une largeur mobile étroite ; si des bandes noires apparaissent dans l’un ou l’autre cas, le pourcentage du conteneur ne correspond pas à la forme réelle de la vidéo et doit être ajusté.

Questions fréquentes