视频播放器显示黑色边框

Question

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

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

Thanks

Answer 1

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.

Answer 2

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;
}

Answer 3

From this (black video borders):

To This (no black borders):

By adding:

<video width="103%" style="margin-left: -3px">

Answer 4

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

Answer 5

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

video {
    clip-path: inset(1px 1px);
}