Hiding controls

Checklist

• [yes] Verified whether your issue exists in the latest version Mux Element(s) release: npm install @mux/[element_name] or yarn @mux/[element_name].
  • (NOTE: If the issue is not occurring in the latest version, we may not resolve it.)
• [yes] Confirmed that this issue hasn’t already been filed.

Which Mux Elements/Packages has a bug?

• mux-player

Which browser(s) are you using?

• Chrome
• Safari
• Firefox
• Edge (“Edgeium”)
• Chrome Android
• Safari on iOS

Which operating system(s) are you using?

• macOs
• IOS
• Android

How are you using Mux Elements?

• npm package

Describe the bug

controlslist property/attribute doesn’t work. I’m trying to hide all controllers from the player using the controlslist attribute but nothing gets hidden. Also no luck using the css mux-player::part selectors.

Steps To Reproduce

1. Spin up a mux player instance
2. Add controlslist attributes as specified in the docs
3. Observe that it has no effect

Link to code example:

https://docs.mux.com/guides/video/mux-player

try adding the controlslist attribute to any example player and see that it doesn’t have any effect.

The current behavior

All controllers appear regardless of controlslist or css updates

The expected behavior

controlslist should hide the controllers listed in that attribute

[luwes]

@Tenkir good call, we’ll discuss if this should be parts of that CSS var.

in the mean time disable the controls backdrop with this CSS.

      mux-player::part(vertical-layer) {
        background-color: transparent;
      }

thanks for the feedback!

[Tenkir]

In beta.27 it’s possible to hide all controls with CSS vars.

See https://elements-demo-nextjs-40kcft3mv-mux.vercel.app/MuxPlayer https://github.com/muxinc/elements/tree/main/packages/mux-player#hiding-controls

This is still darkening the player when hovering.

mux-player {
  --controls: none;
}