"Video Player Controls" (#906767) / Laborator Support

Comments

3
artdsgpuc started the conversation
September 29, 2016 at 9:58pm
Hi there!
I need some help with changing the color of the video controls overlay. Specifically for the video under the "Como selecionar ou cadastrar uma atividade..." section. The video background is white, so the white controls blend into the background...
Thanks in advance!

Mateus
{"wp":{"use":false,"adminUrl":"http://dad.puc-rio.br/graduacao/atividades-complementares/wp-admin","username":"","password":""},"ftp":{"use":false,"url":"","port":"","user":"","password":"","path":""}}

1,558

Laborator replied

September 30, 2016 at 11:27am

Hi there,

Paste the following CSS in your Custom CSS area of that page to make them dark:

.video-js.vjs-default-skin .vjs-big-play-button:after, .video-js.vjs-minimal-skin .vjs-control-bar .vjs-control.vjs-fullscreen-control:before, .video-js.vjs-minimal-skin .vjs-control-bar .vjs-control.vjs-play-control:before, .video-js.vjs-minimal-skin .vjs-control-bar .vjs-control.vjs-volume-menu-button:before,  {
  color: #000 !important;
}

.video-js.vjs-minimal-skin .vjs-control-bar .vjs-control.vjs-progress-control .vjs-slider {
  background-color: rgba(0,0,0,0.5) !important;
}

.video-js.vjs-default-skin .vjs-big-play-button:after, .video-js.vjs-minimal-skin .vjs-control-bar .vjs-control.vjs-fullscreen-control:before, .video-js.vjs-minimal-skin .vjs-control-bar .vjs-control.vjs-play-control:before, .video-js.vjs-minimal-skin .vjs-control-bar .vjs-control.vjs-volume-menu-button:before {
  border-color: #000;
}

.video-js.vjs-default-skin .vjs-big-play-button:after, .video-js.vjs-minimal-skin .vjs-control-bar .vjs-control.vjs-fullscreen-control:before, .video-js.vjs-minimal-skin .vjs-control-bar .vjs-control.vjs-play-control:before, .video-js.vjs-minimal-skin .vjs-control-bar .vjs-control.vjs-volume-menu-button:before {
  color: #000;
}

.video-js.vjs-minimal-skin .vjs-control-bar .vjs-control.vjs-progress-control .vjs-play-progress.vjs-slider-bar {
  background: #000;
}

.video-js.vjs-minimal-skin .vjs-control-bar .vjs-control.vjs-volume-menu-button .vjs-menu .vjs-menu-content .vjs-volume-bar {
  background: rgba(0,0,0,.3);
}

.video-js .vjs-volume-level {
  background-color: #000 !important;
}

Best regards,
Laborator Team

Documentation Join Kalium Users Group

1 Like

3
artdsgpuc replied
September 30, 2016 at 5:37pm
Thank you so much, Art, that worked like a charm. One more thing, how could I make the video loop back to the beginning, without playing automatically, once it's played once? Like, play the video, it ends, the video current time returns to 0, with the video preview again, but the video does not play automatically until the play button is pressed.
Right now, once the video ends it displays a black screen...
Thanks in advance! - Matt
1,558
Laborator replied
October 3, 2016 at 12:22pm
Hi Matt,
Unfortunately that's not possible, we have also had tickets before this one requesting the video-loop but that's not possible at the moment.
Best regards,
Laborator Team

Documentation Join Kalium Users Group