我使用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

謝謝

我發現以下是移除1px邊框的最佳解決方案:

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

這些都不對。這是一個焦點問題。你需要做的是:

video:focus { outline:none; }

//或者，如果您需要符合ADA/WCAG標準的焦點，請選擇彩色或透明或其他顏色。

這實際上是一個眾所周知的問題。稍微隱藏一下就解決了->給包裝視頻溢出的父元素:hidden 而視頻(位置相對/絕對)左邊:1px。

像這樣:

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

由此(黑色視頻邊框):

對此(無黑色邊框):

加入:

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

怎么樣:

border: none !important;

如果這不起作用，請嘗試添加:

border-right: none !important;

如果這些沒有幫助，請向我們展示您的網站

我也遇到過這個問題，我不知道為什么會這樣。我是這樣繞過它的:

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

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

我不知道這是不是最好的解決方法，但它確實有效。