Video Player Shows Black Border

Strange border left black on video tag

The line is in the video itself.

Also, please don't have a 26 second video being 70MB in size. That's ridiculous, especially for a cover video. The bitrate was too high for my internet connection (which can play reasonably compressed 1440p video just fine - YouTube, Vimeo etc.) and it will drive your bandwidth through the roof. Aim for 13MB (500KB/second) at most, although less still would be a good idea. It's a fairly simple animation so you may be able to recreate it in HTML5/JavaScript (although the noise might pose an issue).

Note that on mobile the video won't autoplay, regardless of browser or operating system, so you may have to look for an alternative graphic as currently it's just a white space. It's also worth noting that websites should never play sound automatically as it's just unwanted and is generally deemed as some sort of sin.

One last thing - if you didn't select an option when exporting the video to optimise it for the web by placing the moov atom at the start of the file, do so! If I recall correctly, this does away with a couple HTTP requests. It looks like you haven't done that, but I'm not 100% sure. If you can't find such an option in your software, you can use ffmpeg to do so without having to re-encode your video. You can look up how to install it yourself if you like - here's the command (add .exe if using Windows):

ffmpeg -i INPUT.mp4 -movflags faststart -c copy OUTPUT.mp4

Hopefully this answer has been of some help and sorry if I made you feel a bit silly that it was part of the video all along.

If for some reason you are unable to fix the 1px line in the video, you could put the video in a container and work some magic to effectively crop it, although that wouldn't be the best way of going about this.

Unwanted border appearing on video element

In the video you linked to, the border line along the top of the video is part of the video file itself, so it's an issue with the original file or the way you edited it. (I often have this problem with videos. Quite annoying.)

A quick visual fix with CSS would be to pull the top of the video up a bit and hide the line at the top:

.video-js .vjs-tech {
    top: -2px;
}

.video-js {
    overflow: hidden;
}

But yeah, that's a little cheeky.

Related Topics