Video player shows black border

问题

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

回答1:

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

回答2:

From this (black video borders):

To This (no black borders):

By adding:

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

回答3:

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.

回答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

来源：https://stackoverflow.com/questions/20771971/video-player-shows-black-border

标签

css

html

video