Youtube Video Embed

The package provides faster page load while embedding youtube videos since it loads the youtube thumbnail istead of the entire iframe.

The package will load the iframe and play the video only upong clicking the play button.

Installation

npm i -D svelte-youtube-embed

Usage

<script>
  import Youtube from "svelte-youtube-embed";
</script>

<Youtube id="EBtsu6naB8g" />

Default

<Youtube id="EBtsu6naB8g" />

With custom play button

<Youtube id="EBtsu6naB8g">
  {#snippet play_button()}
    <button>play</button>
  {/snippet}
</Youtube>

Using custom overlay

Overlay color Overlay transition duration

50 ms

<Youtube
  id="EBtsu6naB8g"
  --overlay-bg-color="#e5a50a30"
  --overlay-transition="all 50ms linear"
  />

Here the number `30` represents the opacity of `0.3`. Remove it for 100% opaqueness.

Using custom title colors

Title color Title shadow color Font family

<Youtube
  id="KrSH82gg7BQ"
  --title-color="#ffffff"
  --title-shadow-color="#00000030"
  --title-font-family="'Segoe UI', Geneva, Verdana, sans-serif"
/>

Alternative thumbnail

Some videos don't have custom thumbnail, so you can use this option to set the thumbnail to the default one.

Toggle

<Youtube id="EBtsu6naB8g" altThumb={true} />

Disable animations

You can disable animation that is displayed when the play button is clicked by passing `animations` attribute.

<Youtube id="EBtsu6naB8g" animations={false} />

Custom thumbnail

Similar to how we can use custom play button, we can also use custom thumbnails.

Use thumbnail snippet to add image/picture html tag inside Yoututbe component.

<Youtube id="EBtsu6naB8g">
  {#snippet thumbnail()}
    <img
      slot="thumbnail"
      alt="A video on svelte"
      src="/path/image.jpg"
      style="width: 100%; height: 100%; object-fit: contain; object-position: center; background: red"
    />
  {/snippet}
  <!-- inline styles are optional -->
</Youtube>

Github
npm