{"id":16549339,"url":"https://github.com/sharu725/youtube-embed","last_synced_at":"2025-06-25T19:40:08.034Z","repository":{"id":42186747,"uuid":"479035884","full_name":"sharu725/youtube-embed","owner":"sharu725","description":"Embeds a clickable youtube thumbnail instead of the iframe. Upon clicking, loads the iframe.","archived":false,"fork":false,"pushed_at":"2025-01-07T11:39:42.000Z","size":212,"stargazers_count":47,"open_issues_count":8,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-27T12:45:06.709Z","etag":null,"topics":["embed","svelte","sveltekit","video"],"latest_commit_sha":null,"homepage":"https://embed.sveltethemes.dev","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sharu725.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-07T15:07:58.000Z","updated_at":"2025-02-24T07:03:42.000Z","dependencies_parsed_at":"2024-04-04T11:27:18.526Z","dependency_job_id":"a4092eff-0530-45d4-a6c7-15a35af99392","html_url":"https://github.com/sharu725/youtube-embed","commit_stats":{"total_commits":26,"total_committers":3,"mean_commits":8.666666666666666,"dds":0.3846153846153846,"last_synced_commit":"d79d0d073c4966aed8469c3eda192d46d509a4c7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sharu725%2Fyoutube-embed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sharu725%2Fyoutube-embed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sharu725%2Fyoutube-embed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sharu725%2Fyoutube-embed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sharu725","download_url":"https://codeload.github.com/sharu725/youtube-embed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243826797,"owners_count":20354221,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["embed","svelte","sveltekit","video"],"created_at":"2024-10-11T19:29:08.046Z","updated_at":"2025-03-16T19:32:58.080Z","avatar_url":"https://github.com/sharu725.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv class=\"container\"\u003e\n  \u003ch1 data-svelte-h=\"svelte-wr14qn\"\u003eYoutube Video Embed\u003c/h1\u003e\n  \u003cp data-svelte-h=\"svelte-13nlixd\"\u003e\n    The package provides faster page load while embedding youtube videos since\n    it loads the youtube thumbnail istead of the entire iframe.\n  \u003c/p\u003e\n  \u003cp data-svelte-h=\"svelte-1hlxsk3\"\u003e\n    The package will load the iframe and play the video only upong clicking the\n    play button.\n  \u003c/p\u003e\n  \u003ch2 data-svelte-h=\"svelte-136tnhu\"\u003eInstallation\u003c/h2\u003e\n  \u003cpre\n    class=\"svelte-w3w8f2\"\n  \u003e\u003c!-- HTML_TAG_START --\u003enpm i -D svelte-youtube-embed\u003c!-- HTML_TAG_END --\u003e\n\u003c/pre\u003e\n  \u003ch2 data-svelte-h=\"svelte-dnbfhr\"\u003eUsage\u003c/h2\u003e\n  \u003cpre\n    class=\"svelte-w3w8f2\"\n  \u003e\u003c!-- HTML_TAG_START --\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token punctuation\"\u003e\u0026lt;\u003c/span\u003escript\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"token script\"\u003e\u003cspan class=\"token language-javascript\"\u003e\n  \u003cspan class=\"token keyword\"\u003eimport\u003c/span\u003e Youtube \u003cspan class=\"token keyword\"\u003efrom\u003c/span\u003e \u003cspan class=\"token string\"\u003e\"svelte-youtube-embed\"\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token punctuation\"\u003e\u0026lt;/\u003c/span\u003escript\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\n\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token punctuation\"\u003e\u0026lt;\u003c/span\u003eYoutube\u003c/span\u003e \u003cspan class=\"token attr-name\"\u003eid\u003c/span\u003e\u003cspan class=\"token attr-value\"\u003e\u003cspan class=\"token punctuation\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003eEBtsu6naB8g\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e/\u003e\u003c/span\u003e\u003c/span\u003e\n\n\u003c!-- HTML_TAG_END --\u003e\n\u003c/pre\u003e\n  \u003ch2 data-svelte-h=\"svelte-zcecrh\"\u003eDefault\u003c/h2\u003e\n  \u003cpre\n    class=\"svelte-w3w8f2\"\n  \u003e\u003c!-- HTML_TAG_START --\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token punctuation\"\u003e\u0026lt;\u003c/span\u003eYoutube\u003c/span\u003e \u003cspan class=\"token attr-name\"\u003eid\u003c/span\u003e\u003cspan class=\"token attr-value\"\u003e\u003cspan class=\"token punctuation\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003eEBtsu6naB8g\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e/\u003e\u003c/span\u003e\u003c/span\u003e\u003c!-- HTML_TAG_END --\u003e\n\u003c/pre\u003e\n  \u003ch2 data-svelte-h=\"svelte-nf84rh\"\u003eWith custom play button\u003c/h2\u003e\n\n  \u003cpre\n    class=\"svelte-w3w8f2\"\n  \u003e\u003c!-- HTML_TAG_START --\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token punctuation\"\u003e\u0026lt;\u003c/span\u003eYoutube\u003c/span\u003e \u003cspan class=\"token attr-name\"\u003eid\u003c/span\u003e\u003cspan class=\"token attr-value\"\u003e\u003cspan class=\"token punctuation\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003eEBtsu6naB8g\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"token tag\"\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token punctuation\"\u003e\u0026lt;\u003c/span\u003ebutton\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\u003e\u003c/span\u003e\u003c/span\u003eplay\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token punctuation\"\u003e\u0026lt;/\u003c/span\u003ebutton\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token punctuation\"\u003e\u0026lt;/\u003c/span\u003eYoutube\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003c!-- HTML_TAG_END --\u003e\n\u003c/pre\u003e\n  \u003ch2 data-svelte-h=\"svelte-1r92b2h\"\u003eUsing custom overlay\u003c/h2\u003e\n  \u003cpre\n    class=\"svelte-w3w8f2\"\n  \u003e\u003c!-- HTML_TAG_START --\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token punctuation\"\u003e\u0026lt;\u003c/span\u003eYoutube\u003c/span\u003e\n  \u003cspan class=\"token attr-name\"\u003eid\u003c/span\u003e\u003cspan class=\"token attr-value\"\u003e\u003cspan class=\"token punctuation\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003eEBtsu6naB8g\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"token attr-name\"\u003e--overlay-bg-color=\"\u003c/span\u003e\u003cspan class=\"token language-javascript\"\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003eoverlayBGColor\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"token attr-name\"\u003e30\"\u003c/span\u003e\n  \u003cspan class=\"token attr-name\"\u003e--overlay-transition=\"all\u003c/span\u003e \u003cspan class=\"token language-javascript\"\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003eoverlayTransitionDuration\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"token attr-name\"\u003ems\u003c/span\u003e \u003cspan class=\"token attr-name\"\u003elinear\"\u003c/span\u003e\n  \u003cspan class=\"token punctuation\"\u003e/\u003e\u003c/span\u003e\u003c/span\u003e\u003c!-- HTML_TAG_END --\u003e\n\u003c/pre\u003e\n  \u003cp data-svelte-h=\"svelte-vvtw0o\"\u003e\n    Here the number `30` represents the opacity of `0.3`. Remove it for 100%\n    opaqueness.\n  \u003c/p\u003e\n  \u003ch2 data-svelte-h=\"svelte-15qxpdj\"\u003eUsing custom title colors\u003c/h2\u003e\n\n  \u003cpre\n    class=\"svelte-w3w8f2\"\n  \u003e\u003c!-- HTML_TAG_START --\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token punctuation\"\u003e\u0026lt;\u003c/span\u003eYoutube\u003c/span\u003e\n  \u003cspan class=\"token attr-name\"\u003eid\u003c/span\u003e\u003cspan class=\"token attr-value\"\u003e\u003cspan class=\"token punctuation\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003eKrSH82gg7BQ\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"token attr-name\"\u003e--title-color=\u003c/span\u003e\u003cspan class=\"token language-javascript\"\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003etitleColor\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"token attr-name\"\u003e--title-shadow-color=\"\u003c/span\u003e\u003cspan class=\"token language-javascript\"\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003etitleShadowColor\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"token attr-name\"\u003e30\"\u003c/span\u003e\n  \u003cspan class=\"token attr-name\"\u003e--title-font-family=\u003c/span\u003e\u003cspan class=\"token language-javascript\"\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003etitleFontFamily\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"token punctuation\"\u003e/\u003e\u003c/span\u003e\u003c/span\u003e\u003c!-- HTML_TAG_END --\u003e\n\u003c/pre\u003e\n  \u003ch2 data-svelte-h=\"svelte-1y3xwn7\"\u003eAlternative thumbnail\u003c/h2\u003e\n  \u003cp data-svelte-h=\"svelte-nph3bp\"\u003e\n    Some videos don\u0026#39;t have custom thumbnail, so you can use this option to\n    set the thumbnail to the default one.\n  \u003c/p\u003e\n  \u003cpre\n    class=\"svelte-w3w8f2\"\n  \u003e\u003c!-- HTML_TAG_START --\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token punctuation\"\u003e\u0026lt;\u003c/span\u003eYoutube\u003c/span\u003e \u003cspan class=\"token attr-name\"\u003eid\u003c/span\u003e\u003cspan class=\"token attr-value\"\u003e\u003cspan class=\"token punctuation\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003eEBtsu6naB8g\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"token attr-name\"\u003ealtThumb=\u003c/span\u003e\u003cspan class=\"token language-javascript\"\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\u003cspan class=\"token boolean\"\u003etrue\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e/\u003e\u003c/span\u003e\u003c/span\u003e\u003c!-- HTML_TAG_END --\u003e\n\u003c/pre\u003e\n  \u003ch2 data-svelte-h=\"svelte-wdcdcx\"\u003eDisable animations\u003c/h2\u003e\n  \u003cp data-svelte-h=\"svelte-1nd7yj2\"\u003e\n    You can disable animation that is displayed when the play button is clicked\n    by passing `animations` attribute.\n  \u003c/p\u003e\n  \u003cpre\n    class=\"svelte-w3w8f2\"\n  \u003e\u003c!-- HTML_TAG_START --\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token punctuation\"\u003e\u0026lt;\u003c/span\u003eYoutube\u003c/span\u003e \u003cspan class=\"token attr-name\"\u003eid\u003c/span\u003e\u003cspan class=\"token attr-value\"\u003e\u003cspan class=\"token punctuation\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003eEBtsu6naB8g\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"token attr-name\"\u003eanimations=\u003c/span\u003e\u003cspan class=\"token language-javascript\"\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\u003cspan class=\"token boolean\"\u003efalse\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e/\u003e\u003c/span\u003e\u003c/span\u003e\u003c!-- HTML_TAG_END --\u003e\n\u003c/pre\u003e\n  \u003ch2 data-svelte-h=\"svelte-xhxpwp\"\u003eCustom thumbnail\u003c/h2\u003e\n  \u003cp data-svelte-h=\"svelte-e07e6k\"\u003e\n    Similar to how we can use custom play button, we can also use custom\n    thumbnails.\n  \u003c/p\u003e\n  \u003cp data-svelte-h=\"svelte-186y148\"\u003e\n    Use \u003cstrong\u003eslot=\u0026quot;thumbnail\u0026quot;\u003c/strong\u003e to a image/picture html tag\n    and place it inside \u003cem\u003eYoututbe\u003c/em\u003e component.\n  \u003c/p\u003e\n  \u003cpre\n    class=\"svelte-w3w8f2\"\n  \u003e\u003c!-- HTML_TAG_START --\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token punctuation\"\u003e\u0026lt;\u003c/span\u003eYoutube\u003c/span\u003e \u003cspan class=\"token attr-name\"\u003eid\u003c/span\u003e\u003cspan class=\"token attr-value\"\u003e\u003cspan class=\"token punctuation\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003eEBtsu6naB8g\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"token tag\"\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token punctuation\"\u003e\u0026lt;\u003c/span\u003eimg\u003c/span\u003e\n    \u003cspan class=\"token attr-name\"\u003eslot\u003c/span\u003e\u003cspan class=\"token attr-value\"\u003e\u003cspan class=\"token punctuation\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003ethumbnail\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003e\u003c/span\u003e\n    \u003cspan class=\"token attr-name\"\u003ealt\u003c/span\u003e\u003cspan class=\"token attr-value\"\u003e\u003cspan class=\"token punctuation\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003eA video on svelte\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003e\u003c/span\u003e\n    \u003cspan class=\"token attr-name\"\u003esrc\u003c/span\u003e\u003cspan class=\"token attr-value\"\u003e\u003cspan class=\"token punctuation\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003e/path/image.jpg\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003e\u003c/span\u003e\n    \u003cspan class=\"token attr-name\"\u003estyle\u003c/span\u003e\u003cspan class=\"token attr-value\"\u003e\u003cspan class=\"token punctuation\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003ewidth: 100%; height: 100%; object-fit: contain; object-position: center; background: red\u003cspan class=\"token punctuation\"\u003e\"\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"token punctuation\"\u003e/\u003e\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"token comment\"\u003e\u0026lt;!-- inline styles are optional --\u003e\u003c/span\u003e\n\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token tag\"\u003e\u003cspan class=\"token punctuation\"\u003e\u0026lt;/\u003c/span\u003eYoutube\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003c!-- HTML_TAG_END --\u003e\n\u003c/pre\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsharu725%2Fyoutube-embed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsharu725%2Fyoutube-embed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsharu725%2Fyoutube-embed/lists"}