Wrapping an video-element causes strange height

Question

If I'm placing a HTML5-Video element inside a div, it causes a larger height of the wrapper than the video element. The wrapper is 7px heigher than the video source. There is no min-height or something else.

Have a look! (Scroll down to the Video)

The video element is 513px high and the wrapping div (.image) is 520px high.

<div class="image">
    <video muted loop autoplay style="width:100%;" id="video-player">
        <source treatidasreference="1" type="video/mp4" src="/fileadmin/user_upload/bilder/projekte/04_Online_Film_3D-CGI/sparkasse_iserlohn/Sparkasse_175Jahre_FinalCut_01_1_1_NEU.mp4"></source>
    </video>
</div>

Answer 1

The HTML5 video element is noted as being Flow Content or Phasing Content or Embed Content meaning it will behave like an inline element. It therefore honours whitespace around your HTML (like spaces, line-breaks etc).

Option 1: display: block;

Making it a block will remove the space under the video element that is reserved for the descender on the text. (Descenders are the bottom part of characters such as y, g, p etc that descend to the baseline).

To fix it, set your video to be:

display: block;

---

Option 2: vertical-align: top;

Set the video to have a vertical alignment of top. The space reserved for the descenders will still be there but it will appear towards the top of the video but because the height of the video will be that much more than the text it will never have an affect.

vertical-align: top;

---

• See here for more information on the video tag and its properties.
• And here for more information on flow content.
• And finally here for more information regarding font descenders.