So replizieren Sie die Hintergrundgröße:cover auf

Bei der Arbeit mit HTML-Elementen wie

CSS-Ansatz

Mit CSS allein können Sie eine perfekte Coversimulation erstellen für Videos, ohne auf Skripte angewiesen zu sein. Der Trick besteht darin, die Breite und Höhe des Videos im Verhältnis zum Seitenverhältnis des übergeordneten Elements genau zu berechnen. Wenn Ihr Video beispielsweise ein Seitenverhältnis von 16:9 hat:

.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 */
}

Zentrieren des Videos

Wenn Sie auch das Video zentrieren müssen, bietet das folgende CSS einen zuverlässigen Ansatz:

/* 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 */
}

Überlegungen zur Kompatibilität

Während diese Lösung in CSS3-kompatiblen Browsern einwandfrei funktioniert, erfordern ältere Browser möglicherweise einen skriptbasierten Ansatz, um das gewünschte Ergebnis zu erzielen.