[Solved] Unusual Bottom Margin on HTML5 Video Element

[torrance]

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?

[TheDoc]

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

[torrance]

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

[TheDoc]

A very odd one indeed!

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

[torrance]

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!

[dyarbrough93]

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

[alizcodes]

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.

[alizcodes]

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

[DRead]

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.

[Author]

Posts