Css background video

Question

Does someone know how to center this video background?

I tried:

margin: 0 auto;
text-align: center;

So far but none of these worked

Answer 1

Working example with object-fit: cover; More about it here https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.videobg {
  height: 100vh;
  overflow: hidden;
  position: relative; /* requires for to position video properly */
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover; /* combined with 'absolute', works like background-size, but for DOM elements */
}