February 4, 2010 at 5:36 pm #27868
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.
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:
I’m a block element beneath a video element. But why am I jogged down 3 or 4 pixels?
Any help?February 4, 2010 at 5:42 pm #70499TheDocModerator
Probably won’t be able to help ya without a link to a live test server.February 4, 2010 at 5:51 pm #70500
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 #70503TheDocModerator
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 #70501
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 #256537dyarbrough93Participant
THANK YOU!!! This was driving me crazy. It took me over an hour just to identify that the problem was coming from theOctober 19, 2019 at 7:54 pm #297533alizcodesParticipant
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.October 20, 2019 at 12:15 am #297534alizcodesParticipant
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 theNovember 14, 2019 at 12:00 pm #298935DReadParticipant
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.
- The forum ‘CSS’ is closed to new topics and replies.