muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.

Home Page:https://media-chrome.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

πŸ› BUG: (Well, possible bug): Instantiating <media-theme> with JS does not work

endymion1818 opened this issue Β· comments

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 <video> tag without any chrome.

Here's a CodeSandbox demonstrating the issue