Youtube Video Embed

This provides a fast way to embed youtube videos since it loads the youtube thumbnail istead of the iframe. It loads the iframe and starts playing 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">
  <button>play</button>
</Youtube>

Using custom overlay

Overlay color Overlay transition duration

<Youtube
  id="EBtsu6naB8g"
  --overlay-bg-color="{overlayBGColor}30"
  --overlay-transition="all {overlayTransitionDuration}ms 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={titleColor}
  --title-shadow-color="{titleShadowColor}30"
  --title-font-family={titleFontFamily}
/>

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 slot="thumbnail" to a image/picture html tag and place it inside Yoututbe component.

<Youtube id="EBtsu6naB8g">
  <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"
  />
  <!-- inline styles are optional -->
</Youtube>

Github
npm