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

Question

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

我已经尝试过基本的 like 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%;
}

我希望删除的轮廓的屏幕截图 https://imgur.com/HTDiIo4

任何帮助表示赞赏并提前致谢

Answer 1

尝试这个：

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