{"id":13469613,"url":"https://github.com/justinribeiro/lite-youtube","last_synced_at":"2025-05-14T00:09:34.197Z","repository":{"id":38274454,"uuid":"221962889","full_name":"justinribeiro/lite-youtube","owner":"justinribeiro","description":"The fastest little YouTube web component on this side of the internet. The shadow dom web component version of Paul's lite-youtube-embed.","archived":false,"fork":false,"pushed_at":"2025-04-25T19:08:34.000Z","size":608,"stargazers_count":1182,"open_issues_count":1,"forks_count":79,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-04-25T19:11:31.057Z","etag":null,"topics":["vanilla-webcomponent","web-component","youtube"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@justinribeiro/lite-youtube","language":"TypeScript","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/justinribeiro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":["justinribeiro"]}},"created_at":"2019-11-15T16:30:15.000Z","updated_at":"2025-04-25T19:08:38.000Z","dependencies_parsed_at":"2024-01-15T15:47:38.057Z","dependency_job_id":"65f15a5d-83dd-46a8-b030-c3406a183ab2","html_url":"https://github.com/justinribeiro/lite-youtube","commit_stats":{"total_commits":92,"total_committers":11,"mean_commits":8.363636363636363,"dds":"0.18478260869565222","last_synced_commit":"f73e5d4b76624584d73c62e1762f0a143a946e94"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinribeiro%2Flite-youtube","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinribeiro%2Flite-youtube/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinribeiro%2Flite-youtube/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinribeiro%2Flite-youtube/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justinribeiro","download_url":"https://codeload.github.com/justinribeiro/lite-youtube/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254044174,"owners_count":22005093,"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":["vanilla-webcomponent","web-component","youtube"],"created_at":"2024-07-31T15:01:46.876Z","updated_at":"2025-05-14T00:09:29.189Z","avatar_url":"https://github.com/justinribeiro.png","language":"TypeScript","funding_links":["https://github.com/sponsors/justinribeiro"],"categories":["TypeScript"],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/@justinribeiro%2Flite-youtube.svg)](https://badge.fury.io/js/@justinribeiro%2Flite-youtube) ![min+gzip](https://img.shields.io/badge/min%2Bgzip-2.2kb-blue) ![min+br](https://img.shields.io/badge/min%2Bbr-1.7kb-blue) [![](https://data.jsdelivr.com/v1/package/npm/@justinribeiro/lite-youtube/badge)](https://www.jsdelivr.com/package/npm/@justinribeiro/lite-youtube)\n\n![Statements](https://img.shields.io/badge/statements-98.22%25-brightgreen.svg?style=flat) ![Branches](https://img.shields.io/badge/branches-91.17%25-brightgreen.svg?style=flat) ![Functions](https://img.shields.io/badge/functions-100%25-brightgreen.svg?style=flat) ![Lines](https://img.shields.io/badge/lines-98.22%25-brightgreen.svg?style=flat)\n\n# \\\u003clite-youtube\\\u003e\n\n\u003e A web component that renders YouTube embeds faster. The ShadowDom web component version of Paul's [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed).\n\n## Features\n\n- No dependencies; it's just a vanilla web component.\n- It's fast yo.\n- It's Shadow Dom encapsulated!\n- It's responsive 16:9\n- It's accessible via keyboard and will set ARIA via the `videotitle` attribute\n- It's locale ready; you can set the `videoplay` to have a properly locale based label\n- Set the `start` attribute to start at a particular place in a video\n- You can set `autoload` to use Intersection Observer to load the iframe when scrolled into view.\n- Loads placeholder image as WebP with a Jpeg fallback\n- _new in v1.1_: Adds `nocookie` attr for use with use youtube-nocookie.com as iframe embed uri\n- _new in v1.2_: Adds `playlistid` for playlist loading interface support\n- _new in v1.3_: Adds `loading=lazy` to image placeholder for more perf with `posterloading` attr if you'd like to use eager\n- _new in v1.4_: Adds `short` attr for enabling experimental YouTube Shorts mobile interaction support. See (example video)[https://www.youtube.com/watch?v=aw7CRQTuRfo] for details.\n- _new in v1.5_: Adds support for nonce attribute via `window.liteYouTubeNonce` for CSP 2/3 support.\n- _new in v1.6_: Adds `autoPause` for pausing videos scrolled off screen; adds `--lite-youtube-aspect-ratio` CSS custom property create custom aspect ratio videos; adds `--lite-youtube-frame-shadow-visible` CSS custom property to disable frame shadow (flat look); adds a named slot `image` that allows for setting custom poster image; adds `credentialless` for COEP\n- _new in v1.7_: Adds support for 404 fallback posters; add noscript injector to lightdom for search indexing (disable via `disablenoscript` attribute in v1.7.1).\n\n## Install via package manager\n\nThis web component is built with ES modules in mind and is\navailable on NPM:\n\nTo install, use your package manager of choice:\n\n```sh\nnpm i @justinribeiro/lite-youtube\n# or\nyarn add @justinribeiro/lite-youtube\n```\n\nAfter install, import into your project:\n\n```js\nimport '@justinribeiro/lite-youtube';\n```\n\n## Install with CDN\n\nIf you want the paste-and-go version, you can simply load it via CDN:\n\n```html\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1/lite-youtube.min.js\"\u003e\u003c/script\u003e\n```\n\n## Basic Usage\n\n```html\n\u003clite-youtube videoid=\"guJLfqTFfIw\"\u003e\u003c/lite-youtube\u003e\n```\n\n## Basic Usage with Fallback Link\n\nA fallback appears in any of the following circumstances:\n\n1. Before the compontent is initialized\n1. When JS is disabled (like `\u003cnoscript\u003e`)\n1. When JS fails or the lite-youtube script is not loaded/executed\n1. When the browser doesn't support web components\n\n```html\n\u003clite-youtube videoid=\"guJLfqTFfIw\"\u003e\n  \u003ca class=\"lite-youtube-fallback\" href=\"https://www.youtube.com/watch?v=guJLfqTFfIw\"\u003eWatch on YouTube: \"Sample output of devtools-to-video cli tool\"\u003c/a\u003e\n\u003c/lite-youtube\u003e\n```\n\nExample CSS:\n\n```css\n.lite-youtube-fallback {\n\taspect-ratio: 16 / 9; /* matches YouTube player */\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tflex-direction: column;\n\tgap: 1em;\n\tpadding: 1em;\n\tbackground-color: #000;\n\tcolor: #fff;\n\ttext-decoration: none;\n}\n\n/* right-facing triangle \"Play\" icon */\n.lite-youtube-fallback::before {\n\tdisplay: block;\n\tcontent: '';\n\tborder: solid transparent;\n\tborder-width: 2em 0 2em 3em;\n\tborder-left-color: red;\n}\n\n.lite-youtube-fallback:hover::before {\n\tborder-left-color: #fff;\n}\n\n.lite-youtube-fallback:focus {\n\toutline: 2px solid red;\n}\n```\n\n## Playlist Usage\n\nSetting the YouTube playlistid allows the playlist interface to load on interaction. Note, this still requires a videoid for to load a placeholder thumbnail as YouTube does not return a thumbnail for playlists in the API.\n\n```html\n\u003clite-youtube\n  videoid=\"VLrYOji75Vc\"\n  playlistid=\"PL-G5r6j4GptH5JTveoLTVqpp7w2oc27Q9\"\n\u003e\u003c/lite-youtube\u003e\n```\n\n## Add Video Title\n\n```html\n\u003clite-youtube\n  videotitle=\"This is a video title\"\n  videoid=\"guJLfqTFfIw\"\n\u003e\u003c/lite-youtube\u003e\n```\n\n## Update interface for Locale\u003c/h3\u003e\n\n```html\n\u003clite-youtube\n  videoplay=\"Mirar\"\n  videotitle=\"Mis hijos se burlan de mi español\"\n  videoid=\"guJLfqTFfIw\"\n\u003e\n\u003c/lite-youtube\u003e\n```\n\n## Style It\n\nHeight and Width are responsive in the component.\n\n```html\n\u003cstyle\u003e\n  .styleIt {\n    width: 400px;\n    margin: auto;\n  }\n\u003c/style\u003e\n\u003cdiv class=\"styleIt\"\u003e\n  \u003clite-youtube videoid=\"guJLfqTFfIw\"\u003e\u003c/lite-youtube\u003e\n\u003c/div\u003e\n```\n\n## Enable YouTube Shorts interaction on mobile\n\nSee [the example video](https://www.youtube.com/watch?v=aw7CRQTuRfo) of how this feature works for additional details.\n\n```html\n\u003clite-youtube videoid=\"vMImN9gghao\" short\u003e\u003c/lite-youtube\u003e\n```\n\n## AutoLoad with IntersectionObserver\n\nUses Intersection Observer if available to automatically load the YouTube iframe when scrolled into view.\n\n```html\n\u003clite-youtube videoid=\"guJLfqTFfIw\" autoload\u003e \u003c/lite-youtube\u003e\n```\n\n## Set a video start time\n\n```html\n\u003c!-- Start at 5 seconds --\u003e\n\u003clite-youtube videoid=\"guJLfqTFfIw\" videoStartAt=\"5\"\u003e\u003c/lite-youtube\u003e\n```\n\n## Fine tune the poster quality for a video\n\n```html\n\u003clite-youtube\n  videoid=\"guJLfqTFfIw\"\n  posterquality=\"maxresdefault\"\n\u003e\u003c/lite-youtube\u003e\n```\n\n## Use the named slot to set a custom poster image\n```html\n\u003clite-youtube videoid=\"guJLfqTFfIw\"\u003e\n  \u003cimg slot=\"image\" src=\"my-poster-override.jpg\"\u003e\n\u003c/lite-youtube\u003e\n```\n\n## Set custom aspect ratio\n```html\n\u003cstyle\u003e\n  lite-youtube {\n    --lite-youtube-aspect-ratio: 2 / 3;\n  }\n\u003c/style\u003e\n\u003clite-youtube videoid=\"guJLfqTFfIw\"\u003e\u003c/lite-youtube\u003e\n```\n\n## Disable the frame shadow (flat look)\n```html\n\u003cstyle\u003e\n  lite-youtube {\n    /* No Shadow */\n    --lite-youtube-frame-shadow-visible: no;\n  }\n\u003c/style\u003e\n\u003clite-youtube videoid=\"guJLfqTFfIw\"\u003e\u003c/lite-youtube\u003e\n```\n\n## Auto-Pause video when scrolled out of view\nNote: the custom poster image will load with this set, but will then disappear without any user interaction because of the intersection observer starting.\n```html\n \u003clite-youtube videoid=\"VLrYOji75Vc\" autopause\u003e\u003c/lite-youtube\u003e\n```\n\n## NoScript disable\nAs of v1.7.0, we inject into the lightdom a noscript for SEO help. This can conflict with server side rendered noscript injects. To disable, simply pass `disablenoscript` to the component:\n```html\n \u003clite-youtube videoid=\"VLrYOji75Vc\" disablenoscript\u003e\u003c/lite-youtube\u003e\n```\n\n## YouTube QueryParams\n\nUse any [YouTube Embedded Players and Player Parameters](https://developers.google.com/youtube/player_parameters) you like.\n\n\u003e Note: the exception to this rule is the autoplay param; because of the nature of the performance loading and the inconsistency of usage, that parameter generally does not work. See [this comment](https://github.com/justinribeiro/lite-youtube/issues/66#issuecomment-1182110925) for details.\n\n```html\n\u003clite-youtube videoid=\"guJLfqTFfIw\" params=\"controls=0\u0026enablejsapi=1\"\u003e\n\u003c/lite-youtube\u003e\n```\n\n\n## Attributes\n\nThe web component allows certain attributes to be give a little additional\nflexibility.\n\n| Name           | Description                                                      | Default |\n| -------------- | ---------------------------------------------------------------- | ------- |\n| `videoid`      | The YouTube videoid                                              | ``      |\n| `playlistid`   | The YouTube playlistid; requires a videoid for thumbnail         | ``      |\n| `videotitle`   | The title of the video                                           | `Video` |\n| `videoplay`    | The title of the play button (for translation)                   | `Play`  |\n| `videoStartAt` | Set the point at which the video should start, in seconds        | `0`     |\n| `posterquality`| Set thumbnail poster quality (maxresdefault, sddefault, mqdefault, hqdefault) | `hqdefault`  |\n| `posterloading`| Set img lazy load attr `loading` for poster image | `lazy`  |\n| `nocookie`     | Use youtube-nocookie.com as iframe embed uri | `false` |\n| `autoload`     | Use Intersection Observer to load iframe when scrolled into view | `false` |\n| `short`     | Show 9:16 YouTube Shorts-style interaction on mobile devices | `false` |\n| `params`       | Set YouTube query parameters                                     | ``      |\n\n## Events\n\nThe web component fires events to give the ability understand important lifecycle.\n\n| Event Name     | Description                                                      | Returns |\n| -------------- | ---------------------------------------------------------------- | ------- |\n| `liteYoutubeIframeLoaded` | When the iframe is loaded, allowing us of JS API  | `detail: { videoId: this.videoId }` |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinribeiro%2Flite-youtube","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustinribeiro%2Flite-youtube","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinribeiro%2Flite-youtube/lists"}