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="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}" />

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

Demo

site

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Amr 🎨

sharath Kumar 📦

koh 💻

Knarkzel 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!