Skip to main content
Version: 7.12.0

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

SDKs

Web SDKAndroid SDKiOS SDKtvOS SDKAndroid TV SDKChromecast SDKRoku SDK
YesThrough CSS injectionThrough CSS injectionN/AN/AN/AN/A

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;
}
Legacy Android SDK (4.12.x)

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.