Vidéo responsive

Pour vidéo HTML5 et Youtube

Vidéo HTML5 :

video {
  width: 100%    !important;
  height: auto   !important;
}

Pas besoin de supprimer les attributs de taille dans le code.

Vidéo Youtube

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

Mettre la classe sur l'iframe.
Supporté par 94 % des navigateurs en mai 2024 (Can I use).

Selon projet, le code ci-dessous peut mieux convenir :

Youtube ou iframe responsive

.video-responsive { 
overflow:hidden; 
padding-bottom:56.25%; 
position:relative; 
height:0;
}

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

Mettre la classe sur un div encadrant l'iframe.

Selon le format de la vidéo adapter le % du padding-bottom calé sur 16/9 à 56,25% (9 / 16 * 100 = 56,25)

---