When loading page the player background is briefly transparent with layout shift

[rlaphoenix]

Even though I explicitly set the following to #000:

--media-background-color | #000 | background-color of container.

It still briefly goes transparent while loading.

I tested with an empty <media-controller> (as in nothing inside it but "test2" string) and saw it began in the DOM as nothing, then:

<media-controller
  class="w-full h-screen max-[1800px]:h-full overflow-hidden flex flex-col justify-center items-center rounded-xl max-h-[calc(100vh-14.5rem)] max-[1800px]:aspect-video translate-x-0"
  autohide="5"
  defaultstreamtype="live"
  keyboardbackwardseekoffset="5"
  keyboardforwardseekoffset="5"
  >test2</media-controller
>

At this point it is transparent and layout shift is happening. After this when it actually goes the color I selected, the DOM is:

<media-controller
  autohide="5"
  defaultstreamtype="live"
  keyboardbackwardseekoffset="5"
  keyboardforwardseekoffset="5"
  class="w-full h-screen max-[1800px]:h-full overflow-hidden flex flex-col justify-center items-center rounded-xl max-h-[calc(100vh-14.5rem)] max-[1800px]:aspect-video translate-x-0"
  role="region"
  aria-label="video player"
  userinactive=""
  mediapaused=""
  mediaplaybackrate="1"
  mediavolume="1"
  mediavolumelevel="high"
  mediacurrenttime="0"
  mediastreamtype="live"
  mediapipunavailable="unsupported"
  mediavolumeunavailable="unsupported"
  mediacastunavailable="unsupported"
  mediaairplayunavailable="unsupported"
  mediarenditionunavailable="unsupported"
  mediaaudiotrackunavailable="unsupported"
  breakpointsm=""
  breakpointmd=""
  breakpointlg=""
  breakpointxl=""
  >test2</media-controller

This happens with or without my class string, but I need to set the width and height to SOMETHING or it basically doesnt show at all.

[rlaphoenix]

I will also note that I can often also see all the slots of some controls when loading briefly as well, like the mute button slots for the different levels of loudness.

[luwes]

for this I recommend using https://developer.mozilla.org/en-US/docs/Web/CSS/:defined#hiding_elements_until_they_are_defined

[luwes]

related #904

for prevent cumulative layout shift see https://www.media-chrome.org/docs/en/prevent-layout-shift

if you have direct access to the element it's best not to use the CSS var --media-background-color because that will only become available once the JS has loaded. use CSS like:

media-controller {
  background-color: yellow;
}