svelte-youtube-embed
TypeScript icon, indicating that this package has built-in type declarations

0.2.3 • Public • Published

Svelte Youtube Embed

All Contributors

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

<!-- 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
Amr

🎨
sharath Kumar
sharath Kumar

📦
koh
koh

💻
Knarkzel
Knarkzel

🐛

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

/svelte-youtube-embed/

    Package Sidebar

    Install

    npm i svelte-youtube-embed

    Weekly Downloads

    308

    Version

    0.2.3

    License

    none

    Unpacked Size

    11.7 kB

    Total Files

    12

    Last publish

    Collaborators

    • webjeda