Center video vertically inside a video tag

Question

How do you center vertically a video inside a video tag? currently the video is flash-top and the bottom is cropped. what I would like to do is that the middle of the video is in the middle of the video content. the height of the video will be different because it reacts so that the browser becomes smaller than the video. here is 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 this works :)