Comment répliquer background-size:cover sur les éléments

Lorsque vous travaillez avec des éléments HTML comme

Approche CSS

En utilisant CSS seul, vous pouvez créer une simulation de couverture parfaite pour des vidéos sans compter sur des scripts. L'astuce consiste à calculer précisément la largeur et la hauteur de la vidéo par rapport au rapport hauteur/largeur de l'élément parent. Par exemple, si votre vidéo a un format d'image 16:9 :

.parent-element-to-video {
  overflow: hidden;
}
video {
  height: 100%;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-width: 100%;
  min-height: 56.25vw; /* 100 * 9 / 16 */
}

Centrer la vidéo

Si vous devez également centrer la vidéo, le CSS suivant fournira une approche fiable :

/* merge with above CSS */
.parent-element-to-video {
  position: relative; /* or absolute or fixed */
}
video {
  position: absolute;
  left: 50%; /* % of surrounding element */
  top: 50%;
  transform: translate(-50%, -50%); /* % of current element */
}

Considérations de compatibilité

Bien que cette solution fonctionne parfaitement dans les navigateurs compatibles CSS3, les navigateurs plus anciens peuvent nécessiter une approche basée sur des scripts pour obtenir le résultat souhaité.