Comment rendre une vidéo Youtube responsive en 2022 ?

Rassurez-vous, il existe pourtant plusieurs techniques pour intégrer une vidéo Youtube en responsive.
Et encore plus maintenant, en 2022, c’est encore plus simple !

La technique à la papa

La technique ancestrale (qui marche toujours 😇) est la suivante :

**CSS : **

 .video-container {
  position: relative;
  padding-bottom: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

**HTML : **

 <div class="video-container">
  <iframe
    src="https://www.youtube.com/embed/u4VkFNKu1co"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope;"
    allowfullscreen>
</iframe>
</div>

Le pourquoi du comment

D’où vient le 56.25% ?
Simple ! c’est le ratio 16/9 par défaut d’une vidéo Youtube (tentez de diviser 9 par 16, vous verrez ☺️)

Alors, oui effectivement, ça marche. Mais ce n’est pas le plus élégant. Surtout car cela nécessite de rajouter un <div> autour de l’iframe pour avoir ce ratio via le padding.

Bienvenue en 2022 !

Sortez de la De Lorean, on est déjà en 2022, et les propriétés CSS ont bien évolué !

Sachez qu’à présent, il existe une propriété aspect-ratio qui va définir automatiquement la largeur et la hauteur d’un élément, pour qu’il garde ce ratio :

**Le CSS : **

 .video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

**Le HTML : **

 <iframe
  class="video"
  src="https://www.youtube.com/embed/u4VkFNKu1co"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope;"
  allowfullscreen>>

Et là, magie, votre vidéo Youtube sera responsive va occuper 100% de la largeur disponible de son conteneur, et vous n’avez même plus besoin de l’encapsuler dans un conteneur supplémentaire.

Plutôt cool non ?

La cerise sur le gâteau ? C’est supporté partout ou presque, si l’on regarde le tableau de compatibilité de Caniuse.com

Vous n’avez plus aucune excuse (et moi non plus 😃)

Crédit photo : Sara Kurfeß / Unsplash