19

I use a HTML5 video player and it works, but it shows a 1/2 pixel border on the right side. I already checked if it was because the video itself and I tried to set 

border:solid 0px black;

but that didn't help.

My current code:

<video id="video" autoplay>
  <source src="intro.mp4" type="video/mp4" id="video">
  Your browser does not support the HTML5 player.
</video>

and the style

#video{
    width:80%; right: 0; top: 0;
    display:none;
    border:solid 0px black;
}

results in

enter image description here

If someone could help me out, I would be really happy :D

Thanks

Ahmed
  • 585
  • 2
  • 5
  • 17
  • 1
    why not if you share your code – codingrose Dec 25 '13 at 10:54
  • 2
    http://stackoverflow.com/questions/10203437/html5-video-in-ie9-is-showing-a-black-border-on-its-both-sides – Mihai Dec 25 '13 at 10:55
  • @Mihai I tried that, but it leaves a long border trough my text underneath it. And border:none results the same – Ahmed Dec 25 '13 at 10:57
  • Is it the same on all browsers? – Mihai Dec 25 '13 at 10:58
  • @Mihai No in IE11 it shows a green screen ( which is due my video card? ) but when I use the effect to resize it it shows black borders on both sides. Chrome ( the picture ) shows just one border on the right. – Ahmed Dec 25 '13 at 11:01

7 Answers7

28

I found the following to be the best solution for removing the 1px border:

video {
    clip-path: inset(1px 1px);
}
timbari
  • 291
  • 3
  • 3
6

NONE of this is right. This is a focus thing. You need to do:

video:focus { outline:none; }

// or choose a color or transparent or something other if you are needing the focus for ADA/WCAG compliance.

strix25
  • 543
  • 2
  • 10
  • 22
KujoCode
  • 61
  • 1
  • 5
  • Check your selector and make sure they match. This is explained elsewhere on here. This is the correct method. https://stackoverflow.com/questions/57608693/how-to-remove-the-outline-on-my-video-player – KujoCode Sep 16 '20 at 14:20
  • This should be selected as an answer! Works perfectly, looks like chrome ads some outline to the video element on :focus. – strix25 Oct 19 '20 at 14:25
4

it actually a quite known issue. a fix of hide it a bit solves it -> Give the parent element, who wraps the video overflow: hidden and the video (position relative/absolute) left:1px.

Like this:

Html:

<div class="video-wrapper"
  <video id="video" autoplay>
    <source src="intro.mp4" type="video/mp4" id="video">
    Your browser does not support the HTML5 player.
  </video>
</div

Css:

.video-wrapper{
    overflow: hidden
}

.video-wrapper #video{
    position: relative; /* could be absolute if needed */
    left: 1px;
}
Yehuda Menahem
  • 255
  • 1
  • 3
  • 13
3

From this (black video borders):

enter image description here

To This (no black borders):

enter image description here

By adding:

<video width="103%" style="margin-left: -3px">
zzapper
  • 4,743
  • 5
  • 48
  • 45
JoeBermejales
  • 85
  • 2
  • 9
1

How about:

border: none !important;

If this doesn't work try adding as well:

border-right: none !important;

If these don't help please show us your site

DigitalCourt
  • 21
  • 1
0

I've had this issue as well and I can't figure out why it's happening. What I did to get around it was something like this:

<div class="container">
  <video>
    <source>
  </video>
</div>

.container {
    overflow: hidden;
}
.container video {
    display: block;
    width: 100%;
    transform: scale(1.01)
}

I don't know if this is the best way of solving it, but it works.

Filip R
  • 53
  • 1
  • 7
0

It have worked on my side to avoid black and white borders.

margin: -1px;
clip-path: inset(0px);
MustafaEminn
  • 248
  • 2
  • 6