Grow your CSS skills. Land your dream job.

[Solved] Unusual Bottom Margin on HTML5 Video Element

  • # February 4, 2010 at 5:36 pm

    I’ve been playing with making an HTML5 video player with custom controls, and I’ve come across an unusual vertical space beneath <video> elements. I can’t work out where it’s coming from or how to make it disappear without some ugly pixel jogging.

    For example:
    [attachment=0]Screen-shot-2010-02-05-at-11.25.19-AM.png[/attachment]

    I’m seeing this on Firefox, Safari and Chrome, and I’ve tried the usual tricks of nuking both margins and padding, playing with borders, etc. The html markup is very simple: just follow a video element with another block element, eg.:

    Code:

    Any help?

    # February 4, 2010 at 5:42 pm

    Probably won’t be able to help ya without a link to a live test server.

    # February 4, 2010 at 5:51 pm

    Alrighty, here’s the problem in its most simplest form: http://errantdispatch.com/~torrance/ver … etest.html

    (I recommend viewing it in Firefox as there’s not actually a video, and Safari only displays the video element’s background colour on every third or so refresh.)

    # February 4, 2010 at 6:22 pm

    A very odd one indeed!

    The fix, for reasons I cannot explain, is adding a "display: block;" to your <video>.

    # February 4, 2010 at 6:46 pm

    That is odd, I assumed I was already dealing with a block element! Can’t see any mention of the space in the whatwg spec proposals, but I presume it is something unique to media elements.

    Thanks for your help!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".