-1

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:

  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;
<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>

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

The imagehere

Andrzej Ziółek
  • 2,241
  • 1
  • 13
  • 21
Margaret
  • 45
  • 9

1 Answers1

0

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

Ovidiu Unguru
  • 756
  • 5
  • 14
  • Have you tried giving it another type of `display` ? – Ovidiu Unguru Sep 06 '17 at 05:07
  • I tried them all. Still not working. It's weird because when I'm on Live Preview on Safari and I delete the display, it gets fixed, but as soon as I save it, the problem goes back. – Margaret Sep 06 '17 at 12:06