How to make the control bar always visible?

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).

Table of Contents

• SDKs
• Code examples

SDKs

Code examples

Web SDK

The following CSS line is aimed at overwriting the opacity transition and have the control bar always visible.

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

Android SDK

To achieve the same result on Android SDK, the same CSS need to be passed to your app.

Step 1

To learn how to inject CSS into your Android project, follow the guide Android SDK Customization - Custom CSS and JavaScript files.

Step 2

In the CSS file you created, add the code reported above in the Web SDK section.

Legacy iOS/tvOS SDK (4.12.x)

To achieve the same result on iOS SDK, the same CSS need to be passed to your app.

Step 1

To learn how to inject CSS into your iOS project, follow the guide iOS SDK Customization - Custom CSS and JavaScript files.

Step 2

In the CSS file you created, add the code reported above in the Web SDK section.