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”.
https://www.vidstack.io/docs/player/getting-started/installation/cdn
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="https://cdn.jsdelivr.net/npm/vidstack@0.6.4/styles/defaults.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/vidstack@0.6.4/styles/community-skin/video.css"
/>
<script type="module" src="https://cdn.jsdelivr.net/npm/vidstack/dist/cdn/prod.js">
</script>
I’ve confirmed on load this is the css that loads related to vidstack:
https://cdn.jsdelivr.net/npm/vidstack@0.6.4/styles/defaults.css
https://cdn.jsdelivr.net/npm/vidstack@0.6.4/styles/community-skin/video.css
and the js chunks appear in Network tab, here’s one example:
GET https://cdn.jsdelivr.net/npm/vidstack/dist/cdn/chunks/chunk-44JEMMYD.js
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">
<media-outlet></media-outlet>
<media-community-skin></media-community-skin>
</media-player>
</div>
...
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
VidstackHook:
