SvelteKit example issue

[rhscjohn-dev]

I am trying to reproduce your SvelteKit example and I am having an issue.

The player ends up being the size of the poster.

While the {#await . . . } block is processing I get a flash of the HTML5 video player(that is triple the size of the poster image) and when the {:then player} block is executed; the player is the size of the poster image.

I can click on the the tiny player and i get this:

page.svelte

<script>
  import LazyPlayer from "$lib/LazyPlayer.svelte";
</script>

<LazyPlayer
  src="https://media-files.vidstack.io/720p.mp4"
  poster="https://media-files.vidstack.io/poster-seo.png"
/>

LazyPlayer.svelte

<script>
  export let src;
  export let poster;
</script>

{#await import("$lib/player.svelte")}
  <!-- Render video if JavaScript is disabled. -->
  <video {src} controls preload="none">
    <track kind="captions" />
  </video> />
{:then player}
  <svelte:component this={player.default} {src} {poster} />
{/await}

player.svelte

<script>
  import "@vidstack/player/define/vds-media.js";
  import "@vidstack/player/define/vds-video.js";

  export let src;
  export let poster;
</script>

<vds-media>
  <vds-video controls {poster}>
    <video {src} controls preload="none">
      <track kind="captions" />
    </video>
  </vds-video>
</vds-media>

Project Directory