Vidstack Community Skin and Phoenix LiveView

Vidstack is a pretty awesome up-and-coming web video player. I’ve managed to integrate it using a LiveView hook. It works fine, but I wanted to take advantage of the latest Vidstack 0.6 feature: skins. They have a default “Community Skin” which I wanted to try out, but it seems like the CSS is not “taking”.

Like I said, the plain-vanilla player has been working fine(and still does). But trying to add Community Skin by CDN method here in head.html.heex

  <link phx-track-static rel="stylesheet" href="/assets/app.css">

  <link rel="stylesheet" href="" />

  <script type="module" src="">

I’ve confirmed on load this is the css that loads related to vidstack:

and the js chunks appear in Network tab, here’s one example:


and here is me adding the tags in the page template:

  <div id="video-container" phx-update="ignore" class="w-800 h-400 md:w-1000 md:h-1000">
    <div phx-hook="VidstackHook" id="vidstack-11582"></div>
    <media-player autoplay aspect-ratio="16/9">

So, the result is that I see the poster, but no video controls at all(controls shouldn’t be present while using a skin, I’ve been told). It doesn’t seem to find the skin css…? Any others here tried-out vidstack skins with better luck?

Browser: Firefox 113.0.2 (64-bit)
Device: MacOS Ventura 13.1
Phoenix/LiveView 1.7.2/0.18.2


I upgraded to Vidstack 0.6.9 and it works now in all major browsers.