Newlywed Party Monsters

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

    0.1.8 • 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="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.

    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!

    Dependents (0)

    Install

    npm i svelte-youtube-embed

    DownloadsWeekly Downloads

    169

    Version

    0.1.8

    License

    none

    Unpacked Size

    9.86 kB

    Total Files

    12

    Last publish

    Collaborators

    • webjeda