Discussion: How to style mux-player component

[pnijhara]

I cannot find a proper way to style mux-player component. I know under the hood mux-player is using video component for which I used to have a separate CSS file. However, is there any way to style mux-player?

[luwes]

Currently the styling options are somewhat limited but we are planning to add theming support later this year.

There are 2 attributes that can be set that will change the colors of the icons and the controls background.

Any valid CSS color will work.
for example:

primary-color="green"
secondary-color="ff00ff"

also have a look at this demo with color pickers
https://elements-demo-nextjs-1l4t1uk3r-mux.vercel.app/MuxPlayer

[luwes]

Since beta.27 it's also possible to hide / show controls and target specific UI controls with CSS parts.

• https://github.com/muxinc/elements/tree/main/packages/mux-player#hiding-controls
• https://github.com/muxinc/elements/tree/main/packages/mux-player#css-parts