Skip to main content

Forums

Viewing 12 posts - 1 through 12 (of 12 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.

    #299009
    Johny Sins
    Participant

    This reply has been reported for inappropriate content.

    If you are searching for reliable, quick, and budget-friendly plumbing solutions, then contact our Plumbers in Tucson services and get instant help 24/7.

    #299714
    zamoht
    Participant

    This reply has been reported for inappropriate content.

    This specific The Garden Residences is astonishing, My companion and I appreciate each of the play out that you have put into The Florence Residences.

    #299834
    Johny Sins
    Participant

    This reply has been reported for inappropriate content.

    Urgent plumbing situations are not in anyone’s hand! They can get sorted with ease by the Plumbing Services Near Me. Reach them for instant help through us.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.