https://github.com/sharu725/youtube-embed

Embeds a clickable youtube thumbnail instead of the iframe. Upon clicking, loads the iframe.
https://github.com/sharu725/youtube-embed

embed svelte sveltekit video

Last synced: 10 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/sharu725/youtube-embed
• Owner: sharu725
• Created: 2022-04-07T15:07:58.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-06-18T04:48:26.000Z (5 months ago)
• Last Synced: 2024-10-12T19:29:05.663Z (25 days ago)
• Topics: embed, svelte, sveltekit, video
• Language: Svelte
• Homepage: https://embed.sveltethemes.dev
• Size: 162 KB
• Stars: 39
• Watchers: 3
• Forks: 8
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  
Youtube Video Embed

  


    The package provides faster page load while embedding youtube videos since

    it loads the youtube thumbnail istead of the entire iframe.

  

  


    The package will load the iframe and play the video only upong clicking the

    play button.

  

  
Installation

  
npm i -D svelte-youtube-embed



  
Usage

  
<script>

  import Youtube from "svelte-youtube-embed";

</script>


<Youtube id="EBtsu6naB8g" />



  
Default

  
<Youtube id="EBtsu6naB8g" />



  
With custom play button


  
<Youtube id="EBtsu6naB8g">

  <button>play</button>

</Youtube>



  
Using custom overlay

  
<Youtube

  id="EBtsu6naB8g"

  --overlay-bg-color="{overlayBGColor}30"

  --overlay-transition="all {overlayTransitionDuration}ms linear"

  />



  


    Here the number `30` represents the opacity of `0.3`. Remove it for 100%

    opaqueness.

  

  
Using custom title colors


  
<Youtube

  id="KrSH82gg7BQ"

  --title-color={titleColor}

  --title-shadow-color="{titleShadowColor}30"

  --title-font-family={titleFontFamily}

/>



  
Alternative thumbnail

  


    Some videos don't have custom thumbnail, so you can use this option to

    set the thumbnail to the default one.

  

  
<Youtube id="EBtsu6naB8g" altThumb={true} />



  
Disable animations

  


    You can disable animation that is displayed when the play button is clicked

    by passing `animations` attribute.

  

  
<Youtube id="EBtsu6naB8g" animations={false} />



  
Custom thumbnail

  


    Similar to how we can use custom play button, we can also use custom

    thumbnails.

  

  


    Use slot="thumbnail" to a image/picture html tag

    and place it inside Yoututbe component.

  

  
<Youtube id="EBtsu6naB8g">

  <img

    slot="thumbnail"

    alt="A video on svelte"

    src="/path/image.jpg"

    style="width: 100%; height: 100%; object-fit: contain; object-position: center; background: red"

  />

  <!-- inline styles are optional -->

</Youtube>