player iframe background is not transparent when the parent document has a different color-scheme

[dyc3]

Expected Behavior

The iframe background should always be transparent.

Actual Behavior

In browsers, whenever the root document has a color-scheme that is different from the embedded document, the background of the embedded document will become forcibly opaque.

From my research, it might be possible to have the iframe inherit the color scheme of the parent if the child iframe has this style:

html {
    color-scheme: light dark;
}

These may be useful:

• https://fvsch.com/transparent-iframes
• https://sergeyski.com/css-color-scheme-and-iframes-lessons-learned-from-disqus-background-bug/
• [css-color-adjust-1] color-scheme should affect embedded iframes w3c/csswg-drafts#4772

Steps to Reproduce

See my codepen: https://codepen.io/dyc3/pen/ZEVbZbE