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/
• w3c/csswg-drafts#4772

Steps to Reproduce

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