vertically centering video inside a video tag

Question

how do you center vertically a video inside a video tag? currently the video is flush top and the bottom is getting cut off. what i would like to do is for the middle of the video to be in the middle of the video container. the video's height will vary because it's responsive so as the browser becomes smaller so does the video. here's my code:

html

<div id="video-wrap">
    <video preload="auto" autoplay loop muted>
        <source type="video/mp4" src="video.mp4">
    </video>
</div>

css:

#video-wrap {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

Answer 1

These three lines should do:

video{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Let me know if it works :)