{"_id":"@cshawaus/lite-youtube","name":"@cshawaus/lite-youtube","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@cshawaus/lite-youtube","description":"A web component that loads YouTube embed iframes faster. ShadowDom based version of Paul Irish' concept.","homepage":"https://github.com/cshawaus/lite-youtube","license":"MIT","version":"1.0.0","author":{"name":"Chris Shaw","email":"me@cshaw.xyz"},"contributors":[{"name":"Justin Ribeiro","email":"justin@justinribeiro.com","url":"https://justinribeiro.com"}],"repository":{"type":"git","url":"git+https://github.com/cshawaus/lite-youtube.git"},"bugs":{"url":"https://github.com/cshawaus/lite-youtube/issues"},"engines":{"node":">= 16","pnpm":">= 8.5"},"keywords":["lite","web components","youtube"],"sideEffects":false,"main":"lib/index.js","module":"lib/index.esm.js","exports":{"import":"./lib/index.esm.js","require":"./lib/index.cjs.js","types":"./lib/index.d.ts"},"publishConfig":{"access":"public","provenance":true,"registry":"https://registry.npmjs.org/","tag":"latest"},"commitlint":{"extends":["@commitlint/config-conventional"],"rules":{"footer-max-line-length":[2,"always",300]}},"scripts":{"build":"tsx esbuild.ts","dev":"ESBUILD_WATCH=true tsx esbuild.ts","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint --ext .ts --ignore-path .gitignore src/**","lint:prettier":"prettier --check src/*.ts --ignore-path .gitignore","preinstall":"npx only-allow pnpm","prepare":"husky install","start":"pnpm run build && pnpm web-dev-server --open demo/ --node-resolve","start:watch":"concurrently --raw \"pnpm run tsc --watch --preserveWatchOutput\" \"pnpm run wds --watch --open /demo --node-resolve\"","test":"tsc && wtr --coverage","test:watch":"tsc && wtr --coverage --watch","make-test-badges":"pnpm run istanbul-badges-readme","semantic-release":"semantic-release"},"devDependencies":{"@commitlint/cli":"^18.4.2","@commitlint/config-conventional":"^18.4.2","@esm-bundle/chai":"^4.3.4-fix.0","@open-wc/eslint-config":"^12.0.2","@open-wc/testing":"^4.0.0","@semantic-release/changelog":"^6.0.3","@semantic-release/git":"^10.0.1","@types/node":"^20.9.2","@typescript-eslint/eslint-plugin":"^6.11.0","@typescript-eslint/parser":"^6.11.0","@web/dev-server":"^0.4.1","@web/test-runner":"^0.18.0","concurrently":"^8.2.2","esbuild":"^0.19.5","esbuild-plugin-clean":"^1.0.1","esbuild-plugin-d.ts":"^1.1.0","eslint":"^8.54.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^9.0.0","eslint-plugin-html":"^7.1.0","eslint-plugin-lit":"^1.10.1","eslint-plugin-node":"^11.1.0","eslint-plugin-prettier":"^5.0.1","husky":"^8.0.3","istanbul-badges-readme":"^1.8.5","prettier":"^3.1.0","semantic-release":"^22.0.8","tsx":"^4.1.3","typescript":"^5.2.2"},"_id":"@cshawaus/lite-youtube@1.0.0","gitHead":"64f6641491ffcfd9651664184ed22978fabcc3a1","types":"./lib/index.d.ts","_nodeVersion":"20.9.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-0zmTzOQcopsA2S15z1MnHj/mgdkuJVGk62SNrQZc44iFT0GhMSUtOF42YM649DNzMJLE2SvnZkP0EVriaB9unQ==","shasum":"76ac9860aa9bf812567c102635b476908209c8e0","tarball":"https://registry.npmjs.org/@cshawaus/lite-youtube/-/lite-youtube-1.0.0.tgz","fileCount":7,"unpackedSize":53199,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@cshawaus%2flite-youtube@1.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDv62Zhc+5r5Sn64+gfmZQad8hn+6GBQqMxuNtKzflocwIgLwlI5467H10ZwNpbFFFbnzNa043HlLCjVChPHFJkluE="}]},"_npmUser":{"name":"c.shaw","email":"me@cshaw.xyz"},"directories":{},"maintainers":[{"name":"c.shaw","email":"me@cshaw.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lite-youtube_1.0.0_1700361611156_0.24774597311539726"},"_hasShrinkwrap":false}},"time":{"created":"2023-11-19T02:40:11.065Z","1.0.0":"2023-11-19T02:40:11.329Z","modified":"2023-11-19T02:40:11.876Z"},"maintainers":[{"name":"c.shaw","email":"me@cshaw.xyz"}],"description":"A web component that loads YouTube embed iframes faster. ShadowDom based version of Paul Irish' concept.","homepage":"https://github.com/cshawaus/lite-youtube","keywords":["lite","web components","youtube"],"repository":{"type":"git","url":"git+https://github.com/cshawaus/lite-youtube.git"},"contributors":[{"name":"Justin Ribeiro","email":"justin@justinribeiro.com","url":"https://justinribeiro.com"}],"author":{"name":"Chris Shaw","email":"me@cshaw.xyz"},"bugs":{"url":"https://github.com/cshawaus/lite-youtube/issues"},"license":"MIT","readme":"[![npm version](https://badge.fury.io/js/@cshawaus%2Flite-youtube.svg)](https://badge.fury.io/js/@cshawaus%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/@cshawaus/lite-youtube/badge)](https://www.jsdelivr.com/package/npm/@cshawaus/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# \\<lite-youtube\\>\n\n> A web component that displays YouTube embeds faster. Based on Justin Ribeiro's excellent [\\<lite-youtube\\>](https://github.com/justinribeiro/lite-youtube), which, in turn, is a shadow DOM 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! (supports CSS `::part`)\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\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\npnpm i @cshawaus/lite-youtube\n# or\nnpm i @cshawaus/lite-youtube\n# or\nyarn add @cshawaus/lite-youtube\n```\n\nAfter installing import into your project using the following:\n\n```js\nimport '@cshawaus/lite-youtube';\n```\n\n## Usage with CommonJS\n\nCommonJS is supported for those who aren't ready to adopt ESM yet.\n\n```js\nrequire('@cshawaus/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<!-- always the latest version -->\n<script src=\"https://cdn.jsdelivr.net/npm/@cshawaus/lite-youtube/lib/index.js\"></script>\n<script\n  type=\"module\"\n  src=\"https://cdn.jsdelivr.net/npm/@cshawaus/lite-youtube/lib/index.esm.js\"\n></script>\n\n<!-- pinned to a specific version -->\n<script src=\"https://cdn.jsdelivr.net/npm/@cshawaus/lite-youtube@1.0.0/lib/index.js\"></script>\n<script\n  type=\"module\"\n  src=\"https://cdn.jsdelivr.net/npm/@cshawaus/lite-youtube@1.0.0/lib/index.esm.js\"\n></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\n    class=\"lite-youtube-fallback\"\n    href=\"https://www.youtube.com/watch?v=guJLfqTFfIw\"\n    >Watch on YouTube: \"Sample output of devtools-to-video cli tool\"</a\n  >\n</lite-youtube>\n```\n\nExample CSS:\n\n```css\n.lite-youtube-fallback {\n  aspect-ratio: 16 / 9; /* matches YouTube player */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  gap: 1em;\n  padding: 1em;\n  background-color: #000;\n  color: #fff;\n  text-decoration: none;\n}\n\n/* right-facing triangle \"Play\" icon */\n.lite-youtube-fallback::before {\n  display: block;\n  content: '';\n  border: solid transparent;\n  border-width: 2em 0 2em 3em;\n  border-left-color: red;\n}\n\n.lite-youtube-fallback:hover::before {\n  border-left-color: #fff;\n}\n\n.lite-youtube-fallback:focus {\n  outline: 2px solid red;\n}\n```\n\n## Using shadow DOM `::part`\n\nBecause the shadow DOM exists outside of the normal page context it prevent global CSS from being applied. To overcome this you can make use of the `::part` CSS pseudo-element that can traverse the shadow tree and apply styles from the global context.\n\n```css\n.lite-youtube ::part(frame) {\n  border: 2px solid red;\n}\n```\n\n### Available parts\n\n| CSS pseudo-element      | Description                                |\n| ----------------------- | ------------------------------------------ |\n| `::part(frame)`         | Targets the main player frame              |\n| `::part(picture-frame)` | Targets the `<picture>` element            |\n| `::part(picture)`       | Targets the `<img>` element in `<picture>` |\n| `::part(play-button)`   | Targets the play button                    |\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## 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/cshawaus/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## 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"}