{"_id":"@eden-sonder/lite-youtube","_rev":"2-5fe4e23d4e4c782e993462af75ac705c","name":"@eden-sonder/lite-youtube","dist-tags":{"latest":"1.6.1"},"versions":{"1.6.0":{"name":"@eden-sonder/lite-youtube","version":"1.6.0","keywords":["web components","youtube"],"author":{"name":"Eden Thompson"},"license":"MIT","_id":"@eden-sonder/lite-youtube@1.6.0","maintainers":[{"name":"eden-sonder","email":"eden@sondercreative.ca"}],"homepage":"https://github.com/eden-sonder/lite-youtube#readme","bugs":{"url":"https://github.com/eden-sonder/lite-youtube/issues"},"dist":{"shasum":"9586d278154444504c8e8b121b4badce116e665a","tarball":"https://registry.npmjs.org/@eden-sonder/lite-youtube/-/lite-youtube-1.6.0.tgz","fileCount":6,"integrity":"sha512-U3es7qcehJMyRe2x1wcjE6WqFaMfQ/T5aLnUcBFSvUsRBcpoWcdKGWZKA7cwEhDUEX6VTvNGbkimrBJ1+lCWDA==","signatures":[{"sig":"MEYCIQChFLCQYtbMqhI0v1Pr6DzeYBD2vfW8kRRyDvCQ3+XdKwIhAM756t41ADQmsZ5iTLKrpVi7Y4NeVxlETKTQ84SSALdm","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":53443},"main":"lite-youtube.js","type":"module","types":"lite-youtube.d.ts","module":"lite-youtube.js","gitHead":"f73e5d4b76624584d73c62e1762f0a143a946e94","scripts":{"lint":"npm run lint:eslint && npm run lint:prettier","test":"tsc && wtr --coverage","build":"tsc","start":"yarn build && yarn web-dev-server --open demo/ --node-resolve","test:watch":"tsc && wtr --coverage --watch","build:watch":"tsc --watch","lint:eslint":"eslint *.ts --ignore-path .gitignore","start:watch":"concurrently --raw \"yarn tsc --watch --preserveWatchOutput\" \"yarn wds --watch --open /demo --node-resolve\"","lint:prettier":"prettier --check *.ts --ignore-path .gitignore","prepublishOnly":"npm run build","make-test-badges":"yarn istanbul-badges-readme"},"_npmUser":{"name":"eden-sonder","email":"eden@sondercreative.ca"},"prettier":{"arrowParens":"avoid","singleQuote":true},"repository":{"url":"git+ssh://git@github.com/eden-sonder/lite-youtube.git","type":"git"},"_npmVersion":"10.8.2","description":"A fork of the web component that based on @justinribeiro's YouTube embed. ShadowDom based version of Paul Irish' concept.","directories":{},"_nodeVersion":"22.12.0","eslintConfig":{"rules":{"no-unused-vars":"off","import/extensions":["error","always",{"ignorePackages":true}],"import/no-unresolved":"off","@typescript-eslint/no-unused-vars":"error"},"parser":"@typescript-eslint/parser","extends":["@open-wc/eslint-config","eslint-config-prettier"],"plugins":["@typescript-eslint"]},"_hasShrinkwrap":false,"devDependencies":{"chai":"^5.1.2","mocha":"^10.8.2","eslint":"^9.15.0","prettier":"^3.3.3","typescript":"^5.6.3","@types/node":"^22.9.0","@types/mocha":"^10.0.9","concurrently":"^9.1.0","@web/dev-server":"^0.4.6","@esm-bundle/chai":"^4.3.4-fix.0","@open-wc/testing":"^4.0.0","@web/test-runner":"^0.19.0","@open-wc/eslint-config":"^12.0.3","eslint-config-prettier":"^9.1.0","istanbul-badges-readme":"^1.9.0","@typescript-eslint/parser":"^8.15.0","@typescript-eslint/eslint-plugin":"^8.15.0"},"_npmOperationalInternal":{"tmp":"tmp/lite-youtube_1.6.0_1737769685678_0.17919899987345156","host":"s3://npm-registry-packages-npm-production"}},"1.6.1":{"name":"@eden-sonder/lite-youtube","description":"A fork of the web component that based on @justinribeiro's YouTube embed. ShadowDom based version of Paul Irish' concept.","author":{"name":"Eden Thompson"},"repository":{"type":"git","url":"git+ssh://git@github.com/eden-sonder/lite-youtube.git"},"scripts":{"build":"tsc","build:watch":"tsc --watch","start":"yarn build && yarn web-dev-server --open demo/ --node-resolve","start:watch":"concurrently --raw \"yarn tsc --watch --preserveWatchOutput\" \"yarn wds --watch --open /demo --node-resolve\"","lint":"npm run lint:eslint && npm run lint:prettier","lint:eslint":"eslint *.ts --ignore-path .gitignore","lint:prettier":"prettier --check *.ts --ignore-path .gitignore","test":"tsc && wtr --coverage","test:watch":"tsc && wtr --coverage --watch","make-test-badges":"yarn istanbul-badges-readme","prepublishOnly":"npm run build"},"license":"MIT","version":"1.6.1","type":"module","main":"lite-youtube.js","module":"lite-youtube.js","types":"lite-youtube.d.ts","keywords":["web components","youtube"],"devDependencies":{"@esm-bundle/chai":"^4.3.4-fix.0","@open-wc/eslint-config":"^12.0.3","@open-wc/testing":"^4.0.0","@types/mocha":"^10.0.9","@types/node":"^22.9.0","@typescript-eslint/eslint-plugin":"^8.15.0","@typescript-eslint/parser":"^8.15.0","@web/dev-server":"^0.4.6","@web/test-runner":"^0.19.0","chai":"^5.1.2","concurrently":"^9.1.0","eslint":"^9.15.0","eslint-config-prettier":"^9.1.0","istanbul-badges-readme":"^1.9.0","mocha":"^10.8.2","prettier":"^3.3.3","typescript":"^5.6.3"},"eslintConfig":{"parser":"@typescript-eslint/parser","extends":["@open-wc/eslint-config","eslint-config-prettier"],"plugins":["@typescript-eslint"],"rules":{"no-unused-vars":"off","@typescript-eslint/no-unused-vars":"error","import/no-unresolved":"off","import/extensions":["error","always",{"ignorePackages":true}]}},"prettier":{"singleQuote":true,"arrowParens":"avoid"},"_id":"@eden-sonder/lite-youtube@1.6.1","gitHead":"27cc03398b9704e62334f1492fa8b3a44ff4374c","bugs":{"url":"https://github.com/eden-sonder/lite-youtube/issues"},"homepage":"https://github.com/eden-sonder/lite-youtube#readme","_nodeVersion":"23.5.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-SJ3hHYqVdAp3HILJTmh/31vTm/55vfUq2bYSvKewud1TCgEWnnS1JT1NcUMT2hHHbmXTItPpq40XabVDJ96A0Q==","shasum":"4e31af2a1c27efe1d27ea1fc9344e0bcb544e7cc","tarball":"https://registry.npmjs.org/@eden-sonder/lite-youtube/-/lite-youtube-1.6.1.tgz","fileCount":6,"unpackedSize":57452,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC52xpjluaFfqXrLEdIKbHoCKP692EnL1uCijGAzwcOMgIhANa4jIaogDjkVFkEh2b5ZZPpNVP/7Vecy3GD6MAPvKPx"}]},"_npmUser":{"name":"eden-sonder","email":"eden@sondercreative.ca"},"directories":{},"maintainers":[{"name":"eden-sonder","email":"eden@sondercreative.ca"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lite-youtube_1.6.1_1784159460207_0.18692542476866802"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-25T01:48:05.564Z","modified":"2026-07-15T23:51:00.508Z","1.6.0":"2025-01-25T01:48:05.908Z","1.6.1":"2026-07-15T23:51:00.361Z"},"bugs":{"url":"https://github.com/eden-sonder/lite-youtube/issues"},"author":{"name":"Eden Thompson"},"license":"MIT","homepage":"https://github.com/eden-sonder/lite-youtube#readme","keywords":["web components","youtube"],"repository":{"type":"git","url":"git+ssh://git@github.com/eden-sonder/lite-youtube.git"},"description":"A fork of the web component that based on @justinribeiro's YouTube embed. ShadowDom based version of Paul Irish' concept.","maintainers":[{"name":"eden-sonder","email":"eden@sondercreative.ca"}],"readme":"# \\<lite-youtube\\>\n\n> 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.6_: Fixes for Firefox\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 @eden-sonder/lite-youtube\n# or\nyarn add @eden-sonder/lite-youtube\n```\n\nAfter install, import into your project:\n\n```js\nimport '@eden-sonder/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<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1/lite-youtube.min.js\"></script>\n```\n\n## Basic Usage\n\n```html\n<lite-youtube videoid=\"guJLfqTFfIw\"></lite-youtube>\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 `<noscript>`)\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<lite-youtube videoid=\"guJLfqTFfIw\">\n  <a class=\"lite-youtube-fallback\" href=\"https://www.youtube.com/watch?v=guJLfqTFfIw\">Watch on YouTube: \"Sample output of devtools-to-video cli tool\"</a>\n</lite-youtube>\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<lite-youtube\n  videoid=\"VLrYOji75Vc\"\n  playlistid=\"PL-G5r6j4GptH5JTveoLTVqpp7w2oc27Q9\"\n></lite-youtube>\n```\n\n## Add Video Title\n\n```html\n<lite-youtube\n  videotitle=\"This is a video title\"\n  videoid=\"guJLfqTFfIw\"\n></lite-youtube>\n```\n\n## Update interface for Locale</h3>\n\n```html\n<lite-youtube\n  videoplay=\"Mirar\"\n  videotitle=\"Mis hijos se burlan de mi español\"\n  videoid=\"guJLfqTFfIw\"\n>\n</lite-youtube>\n```\n\n## Style It\n\nHeight and Width are responsive in the component.\n\n```html\n<style>\n  .styleIt {\n    width: 400px;\n    margin: auto;\n  }\n</style>\n<div class=\"styleIt\">\n  <lite-youtube videoid=\"guJLfqTFfIw\"></lite-youtube>\n</div>\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<lite-youtube videoid=\"vMImN9gghao\" short></lite-youtube>\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<lite-youtube videoid=\"guJLfqTFfIw\" autoload> </lite-youtube>\n```\n\n## Set a video start time\n\n```html\n<!-- Start at 5 seconds -->\n<lite-youtube videoid=\"guJLfqTFfIw\" videoStartAt=\"5\"></lite-youtube>\n```\n\n## Fine tune the poster quality for a video\n\n```html\n<lite-youtube\n  videoid=\"guJLfqTFfIw\"\n  posterquality=\"maxresdefault\"\n></lite-youtube>\n```\n\n## Use the named slot to set a custom poster image\n```html\n<lite-youtube videoid=\"guJLfqTFfIw\">\n  <img slot=\"image\" src=\"my-poster-override.jpg\">\n</lite-youtube>\n```\n\n## Set custom aspect ratio\n```html\n<style>\n  lite-youtube {\n    --lite-youtube-aspect-ratio: 2 / 3;\n  }\n</style>\n<lite-youtube videoid=\"guJLfqTFfIw\"></lite-youtube>\n```\n\n## Disable the frame shadow (flat look)\n```html\n<style>\n  lite-youtube {\n    /* No Shadow */\n    --lite-youtube-frame-shadow-visible: no;\n  }\n</style>\n<lite-youtube videoid=\"guJLfqTFfIw\"></lite-youtube>\n```\n\n## Auto-Pause video when scrolled out of view\n```html\n <lite-youtube videoid=\"VLrYOji75Vc\" autopause></lite-youtube>\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> 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<lite-youtube videoid=\"guJLfqTFfIw\" params=\"controls=0&enablejsapi=1\">\n</lite-youtube>\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","readmeFilename":"README.md"}