svelte kit window is not defined

[MarcDAFrame]

does this work for SvelteKit?

[Eudritch]

First and foremost, I recommend SvelteKit over plain svelte. SvelteKit is a svelte extension that simplifies routing and includes features that plain svelte does not, such as layouts.

SvelteKit uses (SSR) server-side rendering by default. Yes, windows work on SvelteKit without an adapter; however, you must add the window on the built-in svelte function, onMount. If you wish to use windows as freely as you do in svelte (SPA). You must install @sveltejs/adapter-static

• install SvelteKit static adapter: run npm i -D @sveltejs/adapter-static'
• Add adapter in svelte.config.js

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      fallback: true,
    })

[EmilTholin]

You can disable server-side rendering on the page you use the video player.

// +page.js
export const ssr = false;

You can also import the component in onMount to make sure it is only loaded in the browser. This way you don't need to disable SSR.

<!-- +page.svelte -->
<script>
  import { onMount } from 'svelte';

  let VideoPlayer;

  const poster = 'https://res.cloudinary.com/dvm02rtnk/image/upload/c_scale,w_1024,q_auto/v1628058523/blender/HERO_Blender_Grease_Pencil_Showcase_g86hfo.jpg';
  const source = [
    'https://res.cloudinary.com/dvm02rtnk/video/upload/v1628057414/blender/HERO_Blender_Grease_Pencil_Showcase_1080p_ctsjpy.mp4',
    'https://res.cloudinary.com/dvm02rtnk/video/upload/v1628057414/blender/HERO_Blender_Grease_Pencil_Showcase_1080p_ctsjpy.webm',
    'https://res.cloudinary.com/dvm02rtnk/video/upload/v1628057414/blender/HERO_Blender_Grease_Pencil_Showcase_1080p_ctsjpy.ogv',
  ];

  onMount(async () => {
    const component = await import('svelte-video-player');

    VideoPlayer = component.default;
  });
</script>

<svelte:component this={VideoPlayer} {poster} {source} />