Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #27868
    torrance
    Member

    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?

    #70499
    TheDoc
    Moderator

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

    #70500
    torrance
    Member

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

    #70503
    TheDoc
    Moderator

    A very odd one indeed!

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

    #70501
    torrance
    Member

    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!

    #256537
    dyarbrough93
    Participant

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

    #297533
    alizcodes
    Participant

    I’ve been having this same problem with having an extra 5px padding at the bottom of my video elements and setting the display to block was not fixing it, but setting it to flex did. Weird but it works.

    #297534
    alizcodes
    Participant

    Scratch that, display block does work. If you’re using Webflow, you’ll need to add the display style inside the embed block, not in the style panel. Adding this inside the

    #298935
    DRead
    Participant

    This was driving my nuts on WordPress. Had to add to figure and video “display: block” and “margin: 0”. But only after I added preview images.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.