Skip to main content

Overriding player CSS

If the player is embedded via scripts (instead of the iframe generated from dashboard), then the player DOM elements are loaded on the same page as the rest of the web page. This allows you to override the CSS by specifying the CSS anywhere on the page and changing the player directly. Below are some of the examples to get you started. If you need any other examples, please reach us at support@vdocipher.com.

Examples​

Player elements have multiple CSS rules defined. To override it, the rule need to be more specific so as to get higher priority in CSS cascading order. You can use !important to make it work.

Hiding fullscreen button​

.vc-container .ytp-fullscreen-button {
  display: none !important;
}

Hiding the speed selection menu​

.vc-container .speedMenuButton {
  display: none !important;
}

Hiding the cog-wheel settings icon​

.vc-container .ytp-settings-button {
  display: none !important;
}