{"repo":"sharu725/youtube-embed","free":true,"listed":false,"github":"https://github.com/sharu725/youtube-embed","clone":"git clone https://github.com/sharu725/youtube-embed.git","description":"Embeds a clickable youtube thumbnail instead of the iframe. Upon clicking, loads the iframe.","language":"Svelte","stars":50,"topics":["svelte","embed","sveltekit","video"],"license":"MIT","category":"media-processing","readme_excerpt":"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 ","default_branch":null,"files":null,"tree":[],"storefront":"/r/sharu725","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/sharu725/youtube-embed/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}