How to keep the control bar always visible on Web

The question above is typically asked by developers who want to be able to see the control bar at all times without having to continuously move the cursor over it (or tap the screen).

Open Video UI

Set the user-idle-timeout attribute (or the userIdleTimeout property) to a negative value. This disables idle detection, so the control bar never fades out.

<theoplayer-default-ui user-idle-timeout="-1"></theoplayer-default-ui>

ui.userIdleTimeout = -1;

Default UI

The following CSS lines overwrite the fade-out transition and keep the control bar always visible.

.theo-secondary-color.vjs-control-bar {
  opacity: 1 !important;
  visibility: visible !important;
}

See the Keep the control bar visible example for a working demo of both UIs.