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 video: 

<Youtube id="EBtsu6naB8g" />

With custom play button

Youtube video: 

<Youtube id="EBtsu6naB8g">
  <button>play</button>
</Youtube>

Using custom overlay

50 ms
Youtube video: 

<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

Youtube video: 

<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.

Youtube video: 

<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 video: 

<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.

A video on svelte 

<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>