Méthode pour les balises <video>

En utilisant une balise <video>: code css pour que votre vidéo soit en pleine largeur et responsive:

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

Source: w3schools.com

Méthode responsive pour les iframe

Si vous importez une vidéo depuis Youtube ou Vimeo, le code fourni comporte une balise “iframe”. Cette balise ne pourra pas automatiquement se mettre à la hauteur de la vidéo, il faut donc appliquer une astuce.

Depuis 2021 (selon caniuse), on peut utiliser très simplement la propriété aspect-ratio:

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

Auparavant, une méthode (légèrement plus compliquée) utilisant le “padding-top” était une solution souvent utilisée. Cette méthode “fluid-width video” (aussi connue comme le “padding-hack”) a été décrite sur le site CSS Tricks.

Insérer (une vidéo en background) depuis Youtube ou Vimeo

Collection d’exemples: https://github.com/eracom/yt-video-bg

Explication du aspect-ratio sur Debug TV

Dans l’épisode 4 de Debug TV, Adrien Cater explique les propriétés object-fit et aspect-ratio.