HTML5 Video container slightly larger than video
<p>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. </p>

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

<p><strong>CSS</strong></p>

<pre><code>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);
}
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="vidContainer"&gt;
  &lt;video loop autoplay&gt;
      &lt;source src="media/headerVideo.webm" type="video/webm"&gt;
      &lt;source src="media/headerVideo.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
  &lt;div class="vidShadow"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>