How to make an html5 video with 100% width vertically center align

Question

I want to show a responsive html5 video with 100% width and auto height in such a way that the space above it is equal to the space below it on all screens and devices. This is my code.

 body, video { border: 0; margin: 0; padding: 0; } body { background-color: black; } video { width: 100%; height: auto; } 

 <video controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4"> </video> 

I tried to achieve this with different ideas like setting margins but they all failed. I am open to javascript/jquery/plugins if necessary.

Answer 1

You can accomplish this by centering with flexbox CSS like so:

 html { height: 100%; } body { background-color: black; height: 100%; margin: 0; display: flex; align-items: center; } video { width: 100%; height: auto; } 

 <video controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4"> </video> 

Answer 2

Have a look at how bootstrap achieves this. They use a wrapping div to control the dimensions and set the video to be absolutely positioned with 100% width and height. It's a bit more flexible than Jon's solution, although that does do what you want.