Overriding Vidalytics Player Styles with Custom CSS

Incorrect Usage

A common mistake is adding custom CSS to a website that unintentionally overrides the Vidalytics player's internal styles. This can happen when using global CSS rules or overly broad selectors.

Why It's a Problem

Custom CSS can interfere with the player's appearance and functionality, causing issues such as:

  • Broken UI elements: Buttons, menus, or other player controls may appear incorrectly or become unusable.
  • Layout issues: Player elements may be cut off, incorrectly positioned, or displayed with unexpected dimensions.
  • Unexpected behavior: Player features, such as CTAs or Play Gates, may not work as intended.

These issues can vary depending on the website's CSS and may affect different parts of the player.

Avoid applying global or overly broad CSS rules that may affect the Vidalytics player's internal elements.

When adding custom styles to your website:

  • Use specific CSS selectors to target only the elements you intend to style.
  • Avoid overriding the player's internal CSS classes unless explicitly instructed by Vidalytics documentation or support.
  • Check for CSS conflicts if player controls, menus, or other elements appear or behave incorrectly.

If you encounter unexpected player behavior, try temporarily disabling your website's custom CSS to determine whether a style conflict is causing the issue.