Blue border around JWPLAYER video

Prathamesh Sonpatki

By Prathamesh Sonpatki

on February 21, 2015

Latest versions of JWPlayer(6.9 onwards) adds blue border around the video when it is in focus.

This is because of the CSS class jwplayer-tab-focus.

The blue border around currently selected video allows to identify which instance of JWPlayer is in focus.

But with a single JWPlayer instance, it can be annoying.

To remove this blue border, we can override the default JWPlayer CSS as follows.

1.jw-tab-focus:focus {
2  outline: none;
3}

To keep all the overridden CSS in once place, we can add this change in a separate file such as jwplayer_overrides.css.

If you liked this blog, you might also like the other blogs we have written. Check out the full archive.

Stay up to date with our blogs. Sign up for our newsletter.

We write about Ruby on Rails, React.js, React Native, remote work,open source, engineering & design.