How to Replicate background-size:cover on

When working with HTML elements like

CSS Approach

Using CSS alone, you can create a perfect cover simulation for videos without relying on scripts. The trick lies in precisely calculating the width and height of the video relative to the aspect ratio of the parent element. For instance, if your video has a 16:9 aspect ratio:

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

Centering the Video

If you also need to center the video, the following CSS will provide a reliable approach:

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

Compatibility Considerations

While this solution works flawlessly in CSS3 compliant browsers, older browsers may require a script-based approach to achieve the desired result.