How to remove the outline on my video player

Question

I have got a basic video player and when clicked to play the video then i get a kind of blue outline, which i wish to remove.

I have tried the basic like outline:none, but nothing has changed. I have also researched on the internet, including w3 schools and it tell may to use the outline attribute. Am I putting it in the wrong place?

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

Screenshot of the outline that i wish to remove https://i.stack.imgur.com/laxtY.jpg

Any help appreciated and thanks in advance

It's because that element is focussed currently. Which browser are you using? I think this will help you https://stackoverflow.com/q/11336017/2427065 — Sagar V, Aug 22 '19 at 11:50
Possible duplicate of [outline:none; does NOT WORK - Only -webkit-appearance:none; is working - what is wrong here?](https://stackoverflow.com/questions/11336017/outlinenone-does-not-work-only-webkit-appearancenone-is-working-what-is) — Sagar V, Aug 22 '19 at 11:52
`.controls progress span { background-color:#2a84cd;}` delete this background-color in your css and tell me what happens — xmaster, Aug 22 '19 at 11:53

score 6 · Answer 1 · answered Aug 22 '19 at 14:03

6

Try this:

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

answered Aug 22 '19 at 14:03

Marko Sikman

345
3
8

1

Please explain why your answer is correct instead of just saying "try this." Especially since when the OP says in the original post "I have tried the basic like `outline:none`, but nothing has changed." – Roddy of the Frozen Peas Aug 22 '19 at 18:52

Sandeep Amarnath · Answer 2 · 2019-08-22T20:18:13.013

2

An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".

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

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

As Marko Sikman said you can also add

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

focus tells that when you click on that element then the outline appears, so if you set it to none then it doesn't appear on click

edited Aug 22 '19 at 20:18

answered Aug 22 '19 at 18:40

Sandeep Amarnath

5,463
3
33
43

Please explain why your answer is correct instead of just saying "try this." – Roddy of the Frozen Peas Aug 22 '19 at 18:52

score -2 · Answer 3 · answered Aug 22 '19 at 11:51

-2

Try adding the following to your CSS:

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

answered Aug 22 '19 at 11:51

Grigory Volkov

472
6
26

4

`!important` is never the solution – xmaster Aug 22 '19 at 11:52

How to remove the outline on my video player

3 Answers3

Linked