Embeds a clickable youtube thumbnail instead of the iframe. Upon clicking, loads the iframe.
npm i -D svelte-youtube-embed
<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
.
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!