{"id":13400702,"url":"https://github.com/paulirish/lite-youtube-embed","last_synced_at":"2025-05-13T20:05:59.511Z","repository":{"id":37789196,"uuid":"219359883","full_name":"paulirish/lite-youtube-embed","owner":"paulirish","description":"A faster youtube embed.","archived":false,"fork":false,"pushed_at":"2024-11-23T00:24:10.000Z","size":137,"stargazers_count":6109,"open_issues_count":20,"forks_count":278,"subscribers_count":57,"default_branch":"master","last_synced_at":"2025-05-06T19:52:10.107Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://paulirish.github.io/lite-youtube-embed/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paulirish.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2019-11-03T20:18:07.000Z","updated_at":"2025-05-05T09:57:49.000Z","dependencies_parsed_at":"2024-03-02T23:26:48.024Z","dependency_job_id":"f2dce83c-8020-41c5-a1f8-8f320bce8fae","html_url":"https://github.com/paulirish/lite-youtube-embed","commit_stats":{"total_commits":86,"total_committers":21,"mean_commits":4.095238095238095,"dds":0.6046511627906976,"last_synced_commit":"be6f03ef53b33866e38a917a256cefca95262804"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulirish%2Flite-youtube-embed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulirish%2Flite-youtube-embed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulirish%2Flite-youtube-embed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulirish%2Flite-youtube-embed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paulirish","download_url":"https://codeload.github.com/paulirish/lite-youtube-embed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254020478,"owners_count":22000750,"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":[],"created_at":"2024-07-30T19:00:54.781Z","updated_at":"2025-05-13T20:05:59.478Z","avatar_url":"https://github.com/paulirish.png","language":"HTML","funding_links":[],"categories":["HTML","JavaScript","Media Elements","Real World","Implementations"],"sub_categories":["Components"],"readme":"# Lite YouTube Embed [![NPM lite-youtube-embed package](https://img.shields.io/npm/v/lite-youtube-embed.svg)](https://npmjs.org/package/lite-youtube-embed)\n\n\u003e #### Renders faster than a sneeze.\n\nProvide videos with a supercharged focus on visual performance.\nThis custom element renders just like the real thing but approximately 224× faster.\n\nDemo: https://paulirish.github.io/lite-youtube-embed/\n\n## Comparison\n\n| Normal `\u003ciframe\u003e` YouTube embed |  `lite-youtube` |\n|---|---|\n|  ![Screen Shot 2019-11-03 at 5 23 50 PM](https://user-images.githubusercontent.com/39191/68095560-5c930d00-fe5f-11e9-8104-e73e77a21287.png)   ![Screen Shot 2019-11-03 at 5 21 05 PM](https://user-images.githubusercontent.com/39191/68095562-5d2ba380-fe5f-11e9-8b5f-18f451b0716d.png)  ![Screen Shot 2019-11-03 at 5 19 35 PM](https://user-images.githubusercontent.com/39191/68095565-5d2ba380-fe5f-11e9-835d-85d37df71f52.png)  | ![Screen Shot 2019-11-03 at 5 23 27 PM](https://user-images.githubusercontent.com/39191/68095561-5d2ba380-fe5f-11e9-9393-e2206a64c8bf.png) ![Screen Shot 2019-11-03 at 5 20 55 PM](https://user-images.githubusercontent.com/39191/68095563-5d2ba380-fe5f-11e9-8f9a-f5c4a774cd56.png)  ![Screen Shot 2019-11-03 at 5 20 16 PM](https://user-images.githubusercontent.com/39191/68095564-5d2ba380-fe5f-11e9-908f-7e12eab8b2ad.png) |\n\n## Basic usage\n\nUse the [`lite-youtube-embed` npm package](https://www.npmjs.com/package/lite-youtube-embed) or download from this repo and use `src/`.\n\nTo use the custom element you will need to:\n\n1. Include the stylesheet within your application\n1. Include the script as well\n1. Use the `lite-youtube` tag via HTML or JS.\n1. Be happy that you're providing a better user experience to your visitors\n\n```html\n\u003c!-- Include the CSS \u0026 JS.. (This could be direct from the package or bundled) --\u003e\n\u003clink rel=\"stylesheet\" href=\"node_modules/lite-youtube-embed/src/lite-yt-embed.css\" /\u003e\n\n\u003cscript src=\"node_modules/lite-youtube-embed/src/lite-yt-embed.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Use the element. You may use it before the lite-yt-embed JS is executed. --\u003e\n\u003clite-youtube videoid=\"goiWrNiaT0I\" playlabel=\"Play: Crayon Physics Deluxe - Trailer HD\"\u003e\u003c/lite-youtube\u003e\n```\n\n\u003cbr\u003e\n\nPrivacy note: lite-youtube uses youtube-nocookie.com instead of youtube.com in order\nto be more privacy friendly for end users.\n\n## Pro-usage: load w/ JS deferred (aka progressive enhancement)\n\nUse this as your HTML, load the script asynchronously, and let the JS progressively enhance it.\n\n```html\n\u003clite-youtube videoid=\"goiWrNiaT0I\" style=\"background-image: url('https://i.ytimg.com/vi/goiWrNiaT0I/hqdefault.jpg');\"\u003e\n  \u003ca href=\"https://youtube.com/watch?v=goiWrNiaT0I\" class=\"lyt-playbtn\" title=\"Play Video\"\u003e\n    \u003cspan class=\"lyt-visually-hidden\"\u003ePlay Video: Crayon Physics Deluxe - Trailer HD\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/lite-youtube\u003e\n```\n\n[Demo: progressive enhancement](https://paulirish.github.io/lite-youtube-embed/variants/pe.html)\n\n## Custom poster image\n\nIf you want to provide a custom poster image, just set it as the background-image, and lite-yt will not overwrite it:\n```html\n\u003clite-youtube videoid=\"goiWrNiaT0I\" style=\"background-image: url('https://i.ytimg.com/vi/goiWrNiaT0I/hqdefault.jpg');\"\u003e\u003c/lite-youtube\u003e\n```\n\nUse [poster-image-availability.html](https://paulirish.github.io/lite-youtube-embed/testpage/poster-image-availability.html) to determine what poster images are available for you.\n\n## Access the YouTube Iframe Player API\n\nUse the `js-api` param: `\u003clite-youtube videoid=\"goiWrNiaT0I\" js-api\u003e`.. Then you can use [IFrame Player API](https://developers.google.com/youtube/iframe_api_reference):\n\n```js\nconst player = await document.querySelector('lite-youtube').getYTPlayer();\nplayer.seekTo(15); // jump to 15 seconds\n```\n\n[Demo: Iframe Player API usage](https://paulirish.github.io/lite-youtube-embed/variants/js-api.html)\n\n## Add a video title\n\nIf you want to display a title prior to loading the full embed, set the `title` attribute:\n```html\n\u003clite-youtube videoid=\"goiWrNiaT0I\" title=\"Crayon Physics Deluxe - Trailer HD\"\u003e\u003c/lite-youtube\u003e\n```\n\n[Demo: visible title](https://paulirish.github.io/lite-youtube-embed/variants/title.html)\n\n### Custom Player Parameters\n\nYouTube supports a variety of [player parameters](https://developers.google.com/youtube/player_parameters#Parameters) to control the iframe's behavior and appearance.\nThese may be applied by using the `params` attribute.\n\n```html\n\u003c!-- Example to show a video player without controls, starting at 10s in, ending at 20s,\n     with modest branding *and* enabling the JS API --\u003e\n\u003clite-youtube videoid=\"goiWrNiaT0I\" params=\"controls=0\u0026start=10\u0026end=30\u0026modestbranding=2\u0026rel=0\u0026enablejsapi=1\"\u003e\u003c/lite-youtube\u003e\n```\n\nNote that lite-youtube uses `autoplay=1` by default.\n\n[Demo: Custom player parameters](https://paulirish.github.io/lite-youtube-embed/variants/params.html)\n\n## Other fast YouTube embeds\n\n* \u0026lt;lite-youtube\u0026gt; using shadow DOM: [`justinribeiro/lite-youtube`](https://github.com/justinribeiro/lite-youtube) :+1:\n* React port 1: [`ibrahimcesar/react-lite-youtube-embed`](https://github.com/ibrahimcesar/react-lite-youtube-embed)\n* React port 2: [`kylemocode/react-lite-yt-embed`](https://github.com/kylemocode/react-lite-yt-embed)\n* React wrapper: [`@next/third-parties`](https://github.com/vercel/next.js/tree/canary/packages/third-parties#youtube-embed)\n* Vue port: [`andrewvasilchuk/vue-lazy-youtube-video`](https://github.com/andrewvasilchuk/vue-lazy-youtube-video)\n\n## Other [third-party facades](https://web.dev/third-party-facades/)\n\n* Lite Vimeo Embed: [`luwes/lite-vimeo-embed`](https://github.com/luwes/lite-vimeo-embed)\n* \u0026lt;lite-vimeo\u0026gt;: [`slightlyoff/lite-vimeo`](https://github.com/slightlyoff/lite-vimeo)\n* React Live Chat Loader (Intercom, Help Scout, Drift, Facebook Messenger): [`calibreapp/react-live-chat-loader`](https://github.com/calibreapp/react-live-chat-loader)\n* Intercom chat facade: [`danielbachhuber/intercom-facade/`](https://github.com/danielbachhuber/intercom-facade/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulirish%2Flite-youtube-embed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaulirish%2Flite-youtube-embed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulirish%2Flite-youtube-embed/lists"}