Skip to main content

Svelte

Try out Source Embedder in your Svelte project.

Replit Example

index.html

Add the following script tag to your index.html file.

<script src="https://embed.sourcesync.io" defer></script>
SourceEmbedVideo.svelte - An example video component powered by Source Embedder
<script lang="ts">
  import { onMount, onDestroy } from "svelte";

  declare global {
    interface Window {
      SourceEmbedsLoader: {
        load: (opts?: { version?: string }) => Promise<any>;
      };
    }
  }

  async function getEmbedderAsync(
    baseSettings: any = {},
    loaderOpts: any = {},
  ) {
    const sourceEmbedder = await window.SourceEmbedsLoader.load(loaderOpts);
    return sourceEmbedder.register(baseSettings);
  }

  let videoEl: HTMLVideoElement;
  let embedInstance: any;
  export let embedSettings: any;

  onMount(async () => {
    const embedder = await getEmbedderAsync();
    await embedder.embed({
      strategy: "direct-iframeless",
      ...embedSettings,
      el: videoEl,
    });
    embedInstance = embedder.getInstance(videoEl);
  });

  onDestroy(() => {
    embedInstance?.destroy?.();
  });

  export const show = () => embedInstance?.show?.();
  export const hide = () => embedInstance?.hide?.();
</script>

<video bind:this={videoEl} {...$$restProps}>
  <slot />
</video>

+page.svelte - An example usage of SourceEmbedVideo.svelte

Make sure the script <script src="https://embed.sourcesync.io" defer></script> is included in the head of your page.


<script lang="ts">
  import SourceEmbedVideo from "./SourceEmbedVideo.svelte";

  let embedVideoComponent: SourceEmbedVideo | null = null;

  const show = () => {
    embedVideoComponent?.show?.();
  };
  const hide = () => {
    embedVideoComponent?.hide?.();
  };
</script>

<svelte:head>
  <script src="https://embed.sourcesync.io" defer></script>
</svelte:head>

<SourceEmbedVideo
  bind:this={embedVideoComponent}
  src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  style="width: 100%;"
  controls={true}
  embedSettings={{ distributionId: "getting-started" }}
/>
<div>
  <button on:click={show}>show</button>
  <button on:click={hide}>hide</button>
</div>