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
less than 1KB (minified & gzipped)

Installation

npm i -D svelte-youtube-embed

Usage

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

<Youtube id="q2Y3f0lHnMs" />

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

<!-- Custom overlay -->
<Youtube id="q2Y3f0lHnMs" --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} />

The id is youtube video id. In this video link https://www.youtube.com/watch?v=q2Y3f0lHnMs, the id is q2Y3f0lHnMs.

Demo

site

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_Amr
🎨

_{sharath Kumar}
📦

_koh
💻