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="https://email@example.com/styles/defaults.css" /> <link rel="stylesheet" href="https://firstname.lastname@example.org/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:
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"> <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