如何删除视频播放器上的轮廓

Question

我有一个基本的视频播放器，当单击播放视频时，我会得到一种蓝色轮廓，我希望将其删除。

我已经尝试过像

outline:none

这样的基本功能，但没有任何改变。我也在互联网上进行了研究，包括w3学校，它告诉我可以使用大纲属性。我是不是放错地方了？

HTML

<div class="video-container">
    <figure id="videoContainer" data-fullscreen="false">
        <video id="video" controls autoplay preload="metadata" poster="img/poster.jpg">
            <source src="../videoplayer/intro.mkv" type="video/mp4">

            <!-- Offer download -->
            <a href="..videoplayer/intro.mkv">Download MP4</a>
        </video>
        <ul id="video-controls" class="controls">
            <li><button id="playpause" type="button">Play/Pause</button></li>
            <li><button id="stop" type="button">Stop</button></li>
            <li class="progress">
                <progress id="progress" value="0" min="0">
                    <span id="progress-bar"></span>
                </progress>
            </li>
            <li><button id="mute" type="button">Mute/Unmute</button></li>
            <li><button id="volinc" type="button">Vol+</button></li>
            <li><button id="voldec" type="button">Vol-</button></li>
            <li><button id="fs" type="button">Fullscreen</button></li>
        </ul>
        <figcaption>

        </figcaption>
    </figure>

CSS

.video-container{
    background-color: #191919;
    width: 100%;
    height: 1000px;
}
figure {
    max-width:1024px;
    max-width:64rem;
    width:250%;
    height:auto;
    margin:20px 0 0;
    margin:1.25rem 0 0;
}
figcaption {
    display:block;
    font-size:16px;
    font-size:1rem;
}
video {
    width:1150px;
    margin-top:200px;
    margin-left: 390px;
}
video#video {
    outline: none
}
/* controls */
.controls, .controls li {
    padding:0;
    margin:0;
}
.controls {
    display:none;
    list-style-type:none;
    overflow:hidden;
    background:transparent;
}
.controls li {
    float:left;
    width:10%;
    margin-left:0.3%;
}
.controls li:first-child {
    margin-left:0;
}
.controls .progress {
    width:38%;
    cursor:pointer;
}
.controls button {
    width:100%;
    text-align:center;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.controls progress {
    display:block;
    width:100%;
    height:20px;
    height:1.25rem;
    margin-top:2px;
    margin-top:0.125rem;
    border:1px solid #aaa;
    overflow:hidden;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.controls progress span {
    width:0%;
    height:100%;
    display:inline-block;
    background-color:#2a84cd;   
}

/* fullscreen */
html:-ms-fullscreen {
    width:100%;
}
:-webkit-full-screen {
    background-color:transparent;
}
/* hide controls on fullscreen with WebKit */
figure[data-fullscreen=true] video::-webkit-media-controls {
    display:none !important;
}
figure[data-fullscreen=true] {
    max-width:100%;
    width:100%;
    margin:0;
    padding:0;
}
figure[data-fullscreen=true] video {
    height:auto;
}
figure[data-fullscreen=true] figcaption {
    display:none;
}
figure[data-fullscreen=true] .controls {
    position:absolute;
    bottom:2%;
    width:100%;
    z-index:2147483647;
}
figure[data-fullscreen=true] .controls li {
    width:5%;
}
figure[data-fullscreen=true] .controls .progress {
    width:68%;
}

我要删除的轮廓的屏幕截图

感谢任何帮助并提前致谢

Answer 1

试试这个：

.video-container:focus {
    outline: none;
}

Answer 2

轮廓是在元素周围、边框之外绘制的一条线，以使元素“突出”。

https://www.w3schools.com/cssref/pr_outline.asp

.video-container{
  background-color: #191919;
  width: 100%;
  height: 1000px;
  // add this
  outline :none;
}

正如 Marko Sikman 所说，你也可以添加

.video-container:focus{
  outline :none;
}

focus 告诉您，当您单击该元素时，就会出现轮廓，因此，如果您将其设置为“none”，则单击时不会出现轮廓

Answer 3

试试这个：

video {
   clip-path: fill-box;
}

Answer 4

尝试将以下内容添加到您的 CSS 中：

#video:focus {
    outline:none !important;
}