Give help. Get help.

  • # 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:

    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.:


    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: … 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!

    # July 5, 2017 at 3:56 pm

    THANK YOU!!! This was driving me crazy. It took me over an hour just to identify that the problem was coming from the

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

You must be logged in to reply to this topic.