I've made some more adjustments and I think this is the final version. First, I "solved" the jank where the elements of controls weren't disappearing all at the same time. I found that the base of the scrub bar was the culprit and was disappearing later then the rest for some reason ( https://i.ibb.co/jR8sSyf/tmp1.jpg ). I couldn't find a way to make it disappear at the same time with the rest, so I just decided to make it transparent and, admittedly, now you can't see where the end of the clip is, but all controls appear and disappear at the same time. After that I messed around a bit more with the overall look and ended up with a completely minimalist design that only uses white and all backgrounds are transparent with white borders where needed. Also, while watching some Precure cuts, I quickly realized that now it's impossible to see the controls over a white footage, so I added some light shadows to text and borders. Maybe shadows are still too light, but I didn't wanted them to be very noticeable, I just wanted to make player controls not completely blend with the light footage.

So here's the final look: https://i.ibb.co/KGgTWNK/tmp2.jpg

And here's the final code:
/*transparent player controls*/
.vjs-control-bar span,
.vjs-playback-rate-value,
.vjs-mouse-display .vjs-time-tooltip {
color: rgba(255,255,255,0.5) !important;
text-shadow:
-1px -1px 0 rgba(0,0,0,0.06),
1px -1px 0 rgba(0,0,0,0.06),
-1px 1px 0 rgba(0,0,0,0.06),
1px 1px 0 rgba(0,0,0,0.06);
}
.vjs-play-control span,
.vjs-menu-item.vjs-selected span {
color: rgba(255,255,255,0.7) !important;
}
.video-js .vjs-play-progress,
.video-js .vjs-progress-control .vjs-mouse-display {
background-color: rgba(255,255,255,0.2) !important;
}
.vjs-menu li.vjs-menu-item {
border: 1px solid rgba(255,255,255,0);
margin: 1px;
}
.vjs-menu li.vjs-menu-item:hover {
background-color: rgba(255,255,255,0) !important;
border: 1px solid rgba(255,255,255,0.3);
box-shadow:
-1px -1px 0 rgba(0,0,0,0.025),
1px -1px 0 rgba(0,0,0,0.025),
-1px 1px 0 rgba(0,0,0,0.025),
1px 1px 0 rgba(0,0,0,0.025);
}
.vjs-menu-item.vjs-selected,
.vjs-time-tooltip {
border: 1px solid rgba(255,255,255,0.5) !important;
box-shadow:
-1px -1px 0 rgba(0,0,0,0.04),
1px -1px 0 rgba(0,0,0,0.04),
-1px 1px 0 rgba(0,0,0,0.04),
1px 1px 0 rgba(0,0,0,0.04);
}
.vjs-fbf,
.vjs-loading-spinner {
border-color: rgba(255,255,255,0.3);
box-shadow:
-1px -1px 0 rgba(0,0,0,0.025),
1px -1px 0 rgba(0,0,0,0.025),
-1px 1px 0 rgba(0,0,0,0.025),
1px 1px 0 rgba(0,0,0,0.025);
}
.vjs-progress-control.vjs-control div {
color: rgba(255,255,255,0.7) !important;
background-color: rgba(255,255,255,0);
text-shadow:
-1px -1px 0 rgba(0,0,0,0.06),
1px -1px 0 rgba(0,0,0,0.06),
-1px 1px 0 rgba(0,0,0,0.06),
1px 1px 0 rgba(0,0,0,0.06);
}
.vjs-play-progress {
box-shadow:
-1px -1px 0 rgba(0,0,0,0.025),
1px -1px 0 rgba(0,0,0,0.025),
-1px 1px 0 rgba(0,0,0,0.025),
1px 1px 0 rgba(0,0,0,0.025);
}
.vjs-time-tooltip {
box-shadow:
-1px -1px 0 rgba(0,0,0,0.025),
1px -1px 0 rgba(0,0,0,0.025),
-1px 1px 0 rgba(0,0,0,0.025),
1px 1px 0 rgba(0,0,0,0.025);
}
.video-js .vjs-control-bar,
.vjs-menu-button-popup .vjs-menu .vjs-menu-content,
.video-js .vjs-load-progress div,
.vjs-menu-item.vjs-selected,
.vjs-slider {
background: rgba(115,133,159,0.0) !important;
}
/*hide the big centered play button*/
.vjs-big-play-button {
visibility: hidden;
}
/*hide volume and fullscreen butons*/
.vjs-volume-panel,
.vjs-fullscreen-control {
display: none !important;
}
/*instant appear/disappear on mouse hover*/
#vjs_video_3 .vjs-button, #vjs_video_3 .vjs-time-control, #vjs_video_3 .vjs-play-progress, #vjs_video_3 .vjs-res-button {
visibility: hidden;
}
#vjs_video_3:hover .vjs-button, #vjs_video_3:hover .vjs-time-control, #vjs_video_3:hover .vjs-play-progress, #vjs_video_3:hover .vjs-res-button {
visibility: visible;
}
As previously, you can delete the parts of the code you don't want (no volume/fullscreen buttons, making controls appear/disappear on mouse hover, ect).