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="KrSH82gg7BQ" />
<Youtube id="KrSH82gg7BQ">
<button>play</button>
</Youtube>
<Youtube
id="KrSH82gg7BQ"
--overlay-bg-color="hsla(0, 0%, 0%, 0.3)"
--overlay-transition="all 100ms linear"
/>
<Youtube
id="kgZeIDSHlhQ"
--title-color="#111111"
--title-shadow-color="#cccccc"
--title-font-family="Lato, sans-serif"
/>
<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):
This project follows the all-contributors specification. Contributions of any kind welcome!