Svelte Youtube Embed

Embeds a clickable youtube thumbnail instead of the iframe. Upon clicking, loads the iframe.

Why?

loads the site faster
responsive image & video

Installation

npm i -D svelte-youtube-embed

Usage

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

<Youtube id="KrSH82gg7BQ" />

<!-- custom play button -->
<Youtube id="KrSH82gg7BQ">
  <button>play</button>
</Youtube>

<!-- Custom overlay -->
<Youtube
  id="KrSH82gg7BQ"
  --overlay-bg-color="hsla(0, 0%, 0%, 0.3)"
  --overlay-transition="all 100ms linear"
/>

<!-- Custom title -->
<Youtube
  id="kgZeIDSHlhQ"
  --title-color="#111111"
  --title-shadow-color="#cccccc"
  --title-font-family="Lato, sans-serif"
/>

<!-- Alternative thumbnail if default thumbnail doesn't show automatically -->
<Youtube id="g50dm1OCV3w" altThumb="{true}" />