css 视频播放器显示黑色边框

ncgqoxb0 于 2023-06-25 发布在其他

关注(0)|答案(7)|浏览(210)

我使用的是HTML5视频播放器，它可以正常工作，但它在右侧显示了1/2像素的边框。我已经检查过是否是因为视频本身和我试图设置

border:solid 0px black;

但那没用
当前代码：

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

和风格

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

导致

如果有人能帮我，我会很高兴的：D
谢谢

css

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

7条答案

按热度按时间

qlvxas9a1#

我发现以下是删除1px边框的最佳解决方案：

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

赞(0）回复(0）举报 2023-06-25

uplii1fm2#

这一切都不对。这是一个专注的事情。你需要做的：

video:focus { outline:none; }

//或选择颜色或透明或其他颜色，如果您需要聚焦ADA/WCAG合规性。

赞(0）回复(0）举报 2023-06-25

ws51t4hk3#

这实际上是一个众所周知的问题。hide it a bit解决了这个问题->给予the parent element，who wrapped the video overflow：隐藏和视频（位置相对/绝对）左：1 px.
像这样：
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;
}

赞(0）回复(0）举报 2023-06-25

7fyelxc54#

从这个（黑色视频边界）：

到此（无黑色边框）：

加入：

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

赞(0）回复(0）举报 2023-06-25

ttcibm8c5#

怎么样：

border: none !important;

如果这不起作用，也尝试添加：

border-right: none !important;

如果这些都没有帮助，请向我们展示您的网站

赞(0）回复(0）举报 2023-06-25

yr9zkbsy6#

我也遇到过这个问题，我不知道为什么会这样。我是这样做的：

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

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

我不知道这是不是最好的解决办法，但它确实有效。

赞(0）回复(0）举报 2023-06-25

7xzttuei7#

它在我这边工作，以避免黑色和白色的边界。