HTML5 Video container slightly larger than video

Question

I have an html5 video header that works as expected with only one problem, the container is about 4 pixels taller than the video. It wouldn't be such a problem except the container has an inset shadow covering the video that also extends slightly below the video and it doesn't look good.

I read somewhere setting display: inline-block on the parent div makes it only expand as large as it's children but that didn't change anything when I tried.

CSS

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
}
video {
    width: 100%;
    height: 100%;
}

.vidContainer {
    position: relative;
    width: 100%;
    height: 100%;
}
.vidShadow {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-box-shadow: inset 0 0 0 500px rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 0 0 500px rgba(0,0,0,.5);
    box-shadow: inset 0 0 0 500px rgba(0,0,0,.5);
}

HTML

<div class="vidContainer">
  <video loop autoplay>
      <source src="media/headerVideo.webm" type="video/webm">
      <source src="media/headerVideo.mp4" type="video/mp4">
  </video>
  <div class="vidShadow"></div>
</div>

Answer 1

Please try this:

video {
    width: 100%;
    height: 100%;
    display: flex;
}