How can I use the <media-theme>
element?
#796
-
I've been following along with creating themes for media chrome, however it makes sense for my case to instantiate the player in JS, for example: import "media-chrome";
document.querySelector("#app").innerHTML = `
<div>
<template id="tiny-theme">
<media-controller>
<slot name="media" slot="media"></slot>
<media-control-bar>
<media-play-button></media-play-button>
</media-control-bar>
</media-controller>
</template>
<media-theme template="tiny-theme">
<video
slot="media"
src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
></video>
</media-theme>
</div>
`; However it doesn't seem to work correctly. It seems to solely render the Here's a CodeSandbox demonstrating the issue |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
Thanks for the interest and question! We might have to document this better. The media-theme element requires an explicit import because it adds a few kBs. This should do it https://codesandbox.io/p/devbox/media-chrome-theme-element-rsnmtt Hope this helps! |
Beta Was this translation helpful? Give feedback.
For anyone else searching for this, the solution is to define a template, importing
MediaThemeElement
from media-chrome