Svelte youtube Embed

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

svelte logo

Want a Svelte site built?

Hire a Svelte developer

Svelte Youtube Embed

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

Why?

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" alternativeThumbnail={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

📦

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

Get New Themes & Resources

Loading Svelte Themes