Google Web Designer - Video Component (on click) - Remove Blue Border

Question

I have created a Non-Google ad banner using Google Web Designer and have used a video component to show the video. Everything works fine.

The accessibility feature, a blue border appears when the video component is clicked to play or pause the video.

I have added the following code to hide the blue border but it doesn't help.

.gwd-video-1ggs:focus, .gwd-video-1ggs:active {
    outline: none !important;
    box-shadow: none !important;
}

It happens only in the Chrome browser and not in Safari. Is there a potential solution to this?

score 0 · Answer 1 · answered May 22 '19 at 06:35

Solved

Add the following code to remove the blue border.

*:focus:not(.focus-visible) {
    outline: none;
}
.focus-visible {
    outline-color: lightgreen;
}

The blog post explains it in details.

1 Answers1