Qu’est-ce que le design responsive ?

Le design responsive signifie que la mise en page d’une page web s’ajuste à l’écran sur lequel elle est consultée, d’un petit téléphone à un grand moniteur de bureau, plutôt que de garder une taille fixe. Appliqué à la vidéo, cela signifie que le lecteur s’adapte à son conteneur plutôt que de toujours s’afficher avec une largeur et une hauteur en pixels fixes.

La technique du padding-bottom

La façon la plus courante de rendre une intégration responsive est d’envelopper l’iframe dans un conteneur avec un padding-bottom basé sur un pourcentage (56,25 % pour de la vidéo 16:9), et de positionner l’iframe en absolu à l’intérieur à 100 % de largeur et de hauteur. Cela conserve le bon ratio d’aspect à n’importe quelle largeur de conteneur.

Une alternative plus récente

Le CSS moderne prend aussi directement en charge la propriété aspect-ratio, qui obtient un résultat similaire avec moins de balisage sur les navigateurs qui la prennent en charge. Voir le guide complet des intégrations responsives pour des exemples fonctionnels des deux approches.

Les deux principales techniques pour la vidéo responsive

Le dimensionnement responsive de la vidéo s’obtient généralement de deux façons. La technique plus ancienne, plus largement compatible, enveloppe l’iframe dans un conteneur utilisant un padding-bottom basé sur un pourcentage (56,25 % pour de la vidéo 16:9) combiné à un positionnement absolu, une astuce qui fonctionne de manière fiable depuis que le design responsive est devenu courant il y a plus d’une décennie. La technique plus récente utilise directement la propriété CSS aspect-ratio sur le conteneur, plus courte à écrire et plus facile à lire, au prix d’une dépendance à une fonctionnalité CSS non prise en charge par certains navigateurs nettement plus anciens.

Un exemple concret comparant les deux techniques

<!-- Technique padding-bottom -->
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="..." style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"></iframe>
</div>

<!-- Technique aspect-ratio -->
<div style="width:100%;aspect-ratio:16/9;">
  <iframe src="..." style="width:100%;height:100%;border:0;"></iframe>
</div>

Les deux produisent le même résultat visuel sur les navigateurs modernes ; le choix dépend surtout du niveau de prise en charge des navigateurs plus anciens que requiert votre public.

Design responsive contre intégration à taille fixe

Une intégration à taille fixe, utilisant des attributs width et height littéraux, est plus simple à écrire mais casse dès que la page environnante est consultée sur un écran plus étroit que cette largeur fixe, débordant la mise en page ou nécessitant un défilement horizontal. Le design responsive échange une petite complexité de mise en place supplémentaire contre une intégration qui fonctionne correctement sur toute la gamme de tailles d’écran que les visiteurs utilisent réellement, ce qui en fait le réglage par défaut recommandé pour pratiquement tous les sites web modernes.

Tester sur une véritable gamme de largeurs d’appareils, pas seulement redimensionner légèrement une fenêtre de navigateur de bureau, reste le moyen le plus fiable de confirmer qu’une intégration responsive se comporte réellement correctement pour toute la gamme de visiteurs qu’un site web typique reçoit, des petits téléphones aux grands moniteurs externes.

Questions fréquentes