Blank space on top of a video cover (only in safari, not chrome)

I have a problem with a video cover for a website, but only when I opened it on Safari. There is a black space between the top and the video that I can’t remove.

There is the code and an image down below:

HTML

<div>
<video autoplay loop poster="images/inicio.png"> 
<source src="video/video.webm" type="video/webm"> 
<source src="video/video.mp4" type="video/mp4"> 
</video>   
</div>

css

video{ 
width: 100% !important; 
height: auto !important; 
min-height: 30%; 
display: table;
background:rgb(242,242,242) url('images/inicio.png') center bottom no-repeat; 
background-size:100% auto;
margin-bottom: -4px;
z-index: 1;

This is the website to see the code:
http://josefinaechenique.esy.es/videos.html

The image

The display:table from the videotag seems to be the issue causing the big space there. Removing it should solve it