STYLING

GENIUS LIVE PLAYER

MAIN VARIABLES

We are using CSS custom properties (variables), feel free to modify variables with your preferred color scheme or use a more specific style in each element.

For example, the color of the big play button and play progress on seek bar is defined as:

--primary-color: #61dafb; #ffc50f default

Another example would be the menu header background defined as:

--primary-background-color: #61dafb; #000000 default

Here we use some custom properties to create a theme with some basic styling.

:root {
  /* Affects big play button, play progress on seek bar */
  --primary-color: #61dafb;
  /* Affects menu header background */
  --primary-background-color: #61dafb;
  /* Affects control bar icons, time display */
  --secondary-color: #ffffff;
  /* Affects close button, social sharing */
  --secondary-background-color: #ffffff;
  /* Affects control bar background */
  --tertiary-color: #000000;
  /* Affects menu content background */z
  --tertiary-background-color: #000000;
}

Check this example (opens in a new tab) for further reference.

UPDATING FONT SIZE AND ICON COLORS

The base font size controls the size of everything, not just text. All dimensions use em-based sizes so that the scale along with the font size. Try increasing it to 15px and see what happens.

The main font color changes the ICON COLORS as well as the text.

.videoContainer .video-js {
  font-size: 10px;
  color: var(--primary-foreground-color);
}