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

<pre class="svelte-w3w8f2"

<Youtube id="EBtsu6naB8g" />

With custom play button

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

Using custom overlay

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