Why is there a slight space between elements in this code?-CodePudding

I have made a hover over effect that works on this image, playing a looped video and showing a text overlay when hovered over. There is a small tiny problem with this. The video is just slightly smaller than the base image, meaning there is tiny gaps between them when the image is hovered over and the video plays. I can't quite figure out why, seeing as the css for the video/text overlay is at width:100%. If anyone can see what I'm missing I would greatly appreciate the input. Thank you! (

It's also worth mentioning that this code was written into CARGO.site's (a site building platform) code editor. {Image 4} is in the place of what would ususally be a html img tag. The Javascript might not be relevant but I will include anyway for clarity's sake.

A link to the exact site I'm working on: https://racerpictures.cargo.site/work

<div  gid="13">

<a href="https://racerpictures.cargo.site/easy-life-beeswax" >
<div  gid="1">




<div >

<video id="video-1" autoplay="" loop="" >
  <source src="https://files.cargocollective.com/c1549988/A002_C018_0922BW_002.mp4" type="video/mp4">
</video>
    <div ><h4>EASY LIFE | BEESWAX<br></h4>
<p >MUSIC VIDEO</p>


</div>

  </div>
<div >
{image 4}
</div>
</div>
</a>
</div>

#video-1 {
    display: block;
    width: 100%;
    height: 100%;
    fit-content: inherit;
 

}

.container-1 {
  position: relative;
    width: 100%;
    margin-bottom: 5px;
   
}

.image-1 {
  display: block;
  width: 100%;
  height: inherit;
}

.overlay-img-1 {
  position: absolute;
  top: 0%;
  bottom: 0;
  left: 0;
  right: 0;
  height: 98.5%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0, 0, 0, 0.4);
}

.overlay-img-1:hover {
  opacity: 1;
}

.text-1 {
    width: 100%;

  color: white;
  font-size: 20px;
  position: absolute;
  top: 60%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


<script>

$(document).ready(function() {
  $('.video-1').each(function(el){
    var _this = $(this);
    _this.on('mouseover', function(ev) {
 
      _this[0].src  = "&autoplay=1";
      ev.preventDefault();

    });
  });
});
</script>

CodePudding user response：

You can add object-fit: cover; to the #video-1. For browser support: https://caniuse.com/?search=object-fit. Also, fit-content is not a css property.