how to stop a black line appearing beneath my html5 video in safari and google chrome

Question

link to the page I'm trying to get sorted

I've got some html5 video on this page and I've managed to get it sorted so that I'm happy with it working in most browsers and displaying an image in those that don't support the video tag.

There is a strange bug that I don't seem to be able to sort out in chrome and safari where a thin black line appears below the video. I've been looking into it but have come up with nothing.

Answer 1

In the video originally linked in the question, the black line is in the MP4 video itself. It's not in the webm and ogg versions. Safari and Chrome will play the MP4.

You could put the video inside a smaller div with overflow:hidden to crop it, but you probably want to fix the video file.

div#videocrop {
    height: 493px;
    overflow: hidden
}