How to hide media control bar initially when video is not played. ?

[kevalrathod]

I am using the latest Media Chrome with Next.js app router. I want to hide the media control bar initially when the video has not been played yet. I tried using the following CSS:

media-control-bar:not([mediahasplayed]) {
   display: none;
}

/* Edit media control bar */
media-control-bar {
  background: var(--media-control-background, linear-gradient(#0000, #000000bf));
  padding-top: 20px;
  padding-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
  gap: 8px;
  --media-font-size: 1.2rem;
}

/* Make the control bar buttons transparent using variables like --media-control-background */
media-control-bar > * {
  --media-control-background: transparent;
  --media-control-color: white;
  --media-button-padding: var(--media-button-padding);
  --media-control-padding: var(--media-controll-padding);
  --media-control-hover-background: var(--media-base-hover-background);
  border-radius: var(--media-hover-item-radius);
}

media-control-bar[mediahasplayed] {
   display: flex;
}

However, this hides the controller all the time, even after the video has played.

[luwes]

not all controls receive all the media attributes. try using

media-controller:not([mediahasplayed]) media-control-bar {
  display: none;
}

inspiration at https://github.com/muxinc/elements/blob/main/packages/mux-player/src/themes/gerwig/gerwig.html

[kevalrathod]

Thank you very much it works. @luwes

Just one suggestion please try to explain more in documentation with will help a lot.