A small addition to the code that I'll post below is making so that player controls appear only when the mouse is hovering over the player. This way they're hidden at the start of the animation (unlike right now where they are shown at the start and fade away after a couple of seconds) and also they disappear immediately after moving the mouse away from the player. The downside is that they aren't fading away gracefully, but just disappearing, and not all at the same time, which looks a bit jank, but personally I prefer this to the normal behavior where you have them lingering on a screen for awhile, especially at the start.
Just add this code at the bottom:
Just add this code at the bottom:
#vjs_video_3 .vjs-control-bar {
visibility: hidden;
}
#vjs_video_3:hover .vjs-control-bar {
visibility: visible;
}
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:
So here's the final look: https://i.ibb.co/KGgTWNK/tmp2.jpg
And here's the final code:
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)./*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;
}
Welp, the final version wasn't final. I've decided to add a response to mouse hover over the elements, just cause I like it, and it makes controls feel a bit more responsive. I've also rearranged some parts of the code to make it easier to understand what's where, just for my own sake.
/*transparent player controls*/
.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;
}
.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.6) !important;
}
.video-js .vjs-play-progress {
background-color: rgba(255,255,255,0.2) !important;
}
.video-js .vjs-progress-control .vjs-mouse-display {
background-color: rgba(255,255,255,0.5) !important;
}
.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);
}
.vjs-menu li.vjs-menu-item {
border: 1px solid rgba(255,255,255,0);
margin: 1px;
}
.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);
}
/*reaction to mouse hover*/
.vjs-play-control:hover span {
color: rgba(255,255,255,0.8) !important;
}
.vjs-progress-control:hover .vjs-play-progress::before {
color: rgba(255,255,255,0.85) !important;
}
.vjs-playback-rate:hover > .vjs-playback-rate-value {
color: rgba(255,255,255,0.8) !important;
}
.vjs-menu li.vjs-menu-item:hover {
background-color: rgba(255,255,255,0) !important;
border: 1px solid rgba(255,255,255,0.5);
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 li.vjs-menu-item:hover span{
color: rgba(255,255,255,0.8) !important;
}
.vjs-res-button:hover span {
color: rgba(255,255,255,0.8) !important;
border-color: rgba(255,255,255,0.6);
}
/*removing stuff*/
.vjs-big-play-button {
visibility: hidden;
}
.vjs-volume-panel,
.vjs-fullscreen-control {
display: none !important;
}
/*controls instantly appear/diappear on mouse over player*/
#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;
}
After some more investigation and fiddling I figured out what was causing scrub bar to disappear not at the same time and I found a way to make it disappear with the rest. After that I decided to go back to having some background, to make things more readable at a glance. I've tried to make it easily visibly over any footage, while still being as transparent and unobtrusive as possible. Here's how it looks: https://i.ibb.co/4V0F111/05.jpg
And here's the code:
To be honest, I'm not sure if I like this or the fully transparent version more, but I'm currently sticking with this one.
And here's the code:
As per usual, there are some options. I've made all corners sharp, cause I like it, but you can unmake it by deleting the "/*sharp corners everywhere*/" part. Other options are the same as before./*transparent player controls*/
.video-js .vjs-control-bar,
.vjs-menu-button-popup .vjs-menu .vjs-menu-content,
.vjs-time-tooltip {
background-color: rgba(40,50,65,0.3) !important;
}
.video-js .vjs-play-progress,
.video-js .vjs-progress-control .vjs-mouse-display {
background-color: rgba(255,255,255,0.5) !important;
}
.video-js .vjs-load-progress div,
.video-js .vjs-load-progress,
.vjs-slider,
.vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
background-color: rgba(215,225,255,0.2) !important;
}
.vjs-control-bar span,
.vjs-playback-rate-value,
.vjs-play-control span,
.vjs-menu-item.vjs-selected span {
color: rgba(255,255,255,0.7) !important;
}
.vjs-progress-control.vjs-control div {
color: rgba(255,255,255,0.8) !important;
}
.vjs-time-tooltip {
color: rgba(255,255,255,0.95) !important;
top: -3.65em !important;
padding: 7px 9px !important;
text-shadow:
-1px -1px 0 rgba(0,0,0,0.05),
1px -1px 0 rgba(0,0,0,0.05),
-1px 1px 0 rgba(0,0,0,0.05),
1px 1px 0 rgba(0,0,0,0.05) !important;
}
.vjs-playback-rate-value,
.vjs-play-control {
z-index: 99;
}
.vjs-fbf,
.vjs-loading-spinner {
border-color: rgba(255,255,255,0.3) !important;
}
/*reaction to mouse hover*/
.vjs-play-control:hover span,
.vjs-progress-control:hover .vjs-play-progress::before {
color: rgba(255,255,255,1) !important;
}
.vjs-time-control:hover span,
.vjs-playback-rate:hover > .vjs-playback-rate-value,
.vjs-menu li.vjs-menu-item:hover span,
.vjs-res-button:hover span {
color: rgba(255,255,255,0.95) !important;
text-shadow:
-1px -1px 0 rgba(0,0,0,0.05),
1px -1px 0 rgba(0,0,0,0.05),
-1px 1px 0 rgba(0,0,0,0.05),
1px 1px 0 rgba(0,0,0,0.05) !important;
}
#vjs_video_3 button:hover,
.vjs-time-control:hover,
.vjs-menu li.vjs-menu-item:hover,
.vjs-menu-item.vjs-selected {
background-color: rgba(215,225,255,0.2) !important;
}
.vjs-res-button:hover span {
border-color: rgba(255,255,255,0.6) !important;
}
/*smooth transitions*/
#vjs_video_3 button:hover,
.vjs-time-control:hover,
.vjs-menu li.vjs-menu-item:hover {
transition: background-color .2s;
}
/*sharp corners everywhere*/
.vjs-fbf,
.vjs-time-tooltip {
border-radius: unset !important;
}
/*removing stuff*/
.vjs-big-play-button {
visibility: hidden;
}
.vjs-volume-panel,
.vjs-fullscreen-control {
display: none !important;
}
/*controls instantly appear/diappear on mouse over player*/
.video-js .vjs-control-bar {
visibility: hidden;
}
.video-js:hover .vjs-control-bar {
visibility: visible;
}
.video-js .vjs-progress-holder {
transition-property: font;
}
.vjs-has-started .vjs-control-bar {
transition: none !important;
}
To be honest, I'm not sure if I like this or the fully transparent version more, but I'm currently sticking with this one.
You deserve an award for this. Thank you so much!!!
tt_taniel said:
this is great. it feels cleaner and i like that i don't need to wait for the player controls to fade on new tabs
Glad it helps :3datwerg said:
You deserve an award for this. Thank you so much!!!
Yoksven
Less obtrusive player controls [mod]
https://i.ibb.co/fFrmyW5/654654.jpg (left modified, right default)
If you want yours to look like this too, you'll need a browser addon/extension that let's you modify css files (I recommend "Stylus" for both Chrome and Firefox). With that you'll need to create a custom style for sakugabooru and then add this code to it.
After pasting the code, save the changes and now your player should look like the one on the left of the screenshot.
A couple more things. As you can see from the screenshot, I've removed volume and fullscreen buttons, because I never intend to use them, but if you want to still have them, just delete the last part (.vjs-volume-panel, .vjs-fullscreen-control {display: none !important;}). I've also removed the big play button, since it's there just at the beginning and was kinda annoying for me, but, again, if you don't want to remove it, delete the part before the last one (.vjs-big-play-button {visibility: hidden;}).