player icon indicating copy to clipboard operation
player copied to clipboard
verified publisher icon vidstack

Default layout breaking in Svelte

Open amir-reza-bijandi opened this issue 1 year ago • 2 comments

The player layout breaks as soon as I add the line blow to my Svelte component:

<style lang="postcss"></style>
  • Framework: Svelte
  • Meta Framework: SvelteKit
  • Node: v23.6.1
  • Device: Laptop
  • OS: Fedora Linux
  • Browser: Firefox@134

https://github.com/user-attachments/assets/ab4ac09e-301a-42ed-b91b-7abd5913508b

amir-reza-bijandi avatar Feb 02 '25 08:02 amir-reza-bijandi

I'm running into a similar issue in dev. In my case I'm just using regular CSS, but if I remove the <style> tags from my VidstackPlayer component altogether, the controls display correctly. It doesn't matter what CSS is within my <style> tags (even empty): if the tags are present on the component where I'm importing vidstack/bundle, the control layout breaks.

OS: Windows 11 Browser: Brave v1.83.118 Node: v22.14.0 Sveltekit: 2.37.0 Svelte: 5.38.6 Vidstack: 1.12.13

gentlemanjohn avatar Oct 22 '25 17:10 gentlemanjohn

...and just as a workaround for anyone dealing with this: I'm able to import CSS into the parent page of my VidstackPlayer component and style things without breaking anything.

gentlemanjohn avatar Oct 22 '25 18:10 gentlemanjohn