{"_id":"@cshawaus/lite-vimeo","_rev":"3-2bf4865658a8cf7dd8bbef3ded27b881","name":"@cshawaus/lite-vimeo","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@cshawaus/lite-vimeo","version":"1.0.0","keywords":["lite","web components","vimeo"],"author":{"name":"Chris Shaw","email":"me@cshaw.xyz"},"license":"MIT","_id":"@cshawaus/lite-vimeo@1.0.0","maintainers":[{"name":"c.shaw","email":"me@cshaw.xyz"}],"contributors":[{"url":"https://infrequently.org/","name":"Alex Russell","email":"slightlyoff@gmail.com"}],"homepage":"https://github.com/cshawaus/lite-vimeo","bugs":{"url":"https://github.com/cshawaus/lite-vimeo/issues"},"dist":{"shasum":"67d7561a24098626b5344968b29789b1e2d60318","tarball":"https://registry.npmjs.org/@cshawaus/lite-vimeo/-/lite-vimeo-1.0.0.tgz","fileCount":9,"integrity":"sha512-qMWhSPZIo5SvDPDqJ9mesQSf9TEyOp7gUKQRn3fSXAryf2Yp61EKQeQ6g9e/DyCbhj3jFPhZxgUvoEGtPFVqeQ==","signatures":[{"sig":"MEQCIA+b4amt2YVK5uoOjv28t8tYN6tkC/sHlUgFPAW293CiAiAxAnWRf1OTc+Aesnzowdmkyj/oKqfmrXJ+wv8IVEgdMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@cshawaus%2flite-vimeo@1.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":67097},"main":"lib/index.js","types":"./lib/index.d.ts","module":"lib/index.mjs","engines":{"node":">= 16","pnpm":">= 8.5"},"exports":{"import":"./lib/index.mjs","require":"./lib/index.js"},"gitHead":"ba3d546d4e906faa22e95aec7080e1698b5bf099","scripts":{"dev":"tsup --watch","lint":"pnpm lint:eslint && pnpm lint:prettier","build":"tsup","prepare":"husky install","preinstall":"npx only-allow pnpm","lint:eslint":"eslint --ext .ts --ignore-path .gitignore src/**","lint:prettier":"prettier --check src/*.ts --ignore-path .gitignore","semantic-release":"semantic-release"},"_npmUser":{"name":"c.shaw","email":"me@cshaw.xyz"},"commitlint":{"rules":{"footer-max-line-length":[2,"always",300]},"extends":["@commitlint/config-conventional"]},"repository":{"url":"git+https://github.com/cshawaus/lite-vimeo.git","type":"git"},"_npmVersion":"10.2.1","description":"A fast drop-in web component replacement for Vimeo iframes that enables high-performance pages.","directories":{},"sideEffects":false,"_nodeVersion":"20.8.1","publishConfig":{"tag":"latest","access":"public","registry":"https://registry.npmjs.org/","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^7.2.0","husky":"^8.0.3","eslint":"^8.52.0","prettier":"^3.0.3","typescript":"^5.2.2","@types/node":"^16.18.59","@commitlint/cli":"^18.2.0","semantic-release":"^22.0.5","eslint-plugin-lit":"^1.10.1","eslint-plugin-html":"^7.1.0","eslint-plugin-node":"^11.1.0","eslint-config-google":"^0.14.0","@semantic-release/git":"^10.0.1","eslint-config-prettier":"^9.0.0","eslint-plugin-prettier":"^5.0.1","@typescript-eslint/parser":"^6.9.0","@semantic-release/changelog":"^6.0.3","@commitlint/config-conventional":"^18.1.0","@typescript-eslint/eslint-plugin":"^6.9.0"},"_npmOperationalInternal":{"tmp":"tmp/lite-vimeo_1.0.0_1698324490102_0.12185452783546236","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@cshawaus/lite-vimeo","version":"1.0.1","keywords":["lite","web components","vimeo"],"author":{"name":"Chris Shaw","email":"me@cshaw.xyz"},"license":"MIT","_id":"@cshawaus/lite-vimeo@1.0.1","maintainers":[{"name":"c.shaw","email":"me@cshaw.xyz"}],"contributors":[{"url":"https://infrequently.org/","name":"Alex Russell","email":"slightlyoff@gmail.com"}],"homepage":"https://github.com/cshawaus/lite-vimeo","bugs":{"url":"https://github.com/cshawaus/lite-vimeo/issues"},"dist":{"shasum":"b68dcb05aad184b8d5efc856e1efe37ef8d094c2","tarball":"https://registry.npmjs.org/@cshawaus/lite-vimeo/-/lite-vimeo-1.0.1.tgz","fileCount":7,"integrity":"sha512-ZjamTH/HWrzSXCIzr3bYqU/02Mqa7jTtiJwgzZYnkB3bUy0TPcchtETXziIXB6RPqpUcRFsHTLmu5OgmSZTQcg==","signatures":[{"sig":"MEYCIQCqOU3yKVZfy0333Rw4+jLcn/tGRlo7XVsbypxlZ+7TdwIhAIbMom7ji5+bjFOOtuigCgSKyYXkAVzuIbt2K1gEnzYo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@cshawaus%2flite-vimeo@1.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":41356},"main":"lib/index.js","types":"./lib/index.d.ts","module":"lib/index.esm.js","engines":{"node":">= 16","pnpm":">= 8.5"},"exports":{"types":"./lib/index.d.ts","import":"./lib/index.esm.js","require":"./lib/index.cjs.js"},"gitHead":"dd7172027cbebc5e096122dca48d76a1284512af","scripts":{"dev":"ESBUILD_WATCH=true tsx esbuild.ts","lint":"pnpm lint:eslint && pnpm lint:prettier","build":"tsx esbuild.ts","prepare":"husky install","preinstall":"npx only-allow pnpm","lint:eslint":"eslint --ext .ts --ignore-path .gitignore src/**","lint:prettier":"prettier --check src/*.ts --ignore-path .gitignore","semantic-release":"semantic-release"},"_npmUser":{"name":"c.shaw","email":"me@cshaw.xyz"},"commitlint":{"rules":{"footer-max-line-length":[2,"always",300]},"extends":["@commitlint/config-conventional"]},"repository":{"url":"git+https://github.com/cshawaus/lite-vimeo.git","type":"git"},"_npmVersion":"10.2.1","description":"A fast drop-in web component replacement for Vimeo iframes that enables high-performance pages.","directories":{},"sideEffects":false,"_nodeVersion":"20.8.1","publishConfig":{"tag":"latest","access":"public","registry":"https://registry.npmjs.org/","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^3.14.0","husky":"^8.0.3","eslint":"^8.52.0","esbuild":"^0.19.5","prettier":"^3.0.3","typescript":"^5.2.2","@types/node":"^16.18.59","@commitlint/cli":"^18.2.0","semantic-release":"^22.0.5","eslint-plugin-lit":"^1.10.1","eslint-plugin-html":"^7.1.0","eslint-plugin-node":"^11.1.0","esbuild-plugin-d.ts":"^1.1.0","esbuild-plugin-clean":"^1.0.1","eslint-config-google":"^0.14.0","@semantic-release/git":"^10.0.1","eslint-config-prettier":"^9.0.0","eslint-plugin-prettier":"^5.0.1","@typescript-eslint/parser":"^6.9.0","@semantic-release/changelog":"^6.0.3","@commitlint/config-conventional":"^18.1.0","@typescript-eslint/eslint-plugin":"^6.9.0"},"_npmOperationalInternal":{"tmp":"tmp/lite-vimeo_1.0.1_1698330693915_0.20008561826243776","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@cshawaus/lite-vimeo","description":"A fast drop-in web component replacement for Vimeo iframes that enables high-performance pages.","homepage":"https://github.com/cshawaus/lite-vimeo","license":"MIT","version":"1.0.2","author":{"name":"Chris Shaw","email":"me@cshaw.xyz"},"contributors":[{"name":"Alex Russell","email":"slightlyoff@gmail.com","url":"https://infrequently.org/"}],"repository":{"type":"git","url":"git+https://github.com/cshawaus/lite-vimeo.git"},"bugs":{"url":"https://github.com/cshawaus/lite-vimeo/issues"},"engines":{"node":">= 22","pnpm":">= 10"},"keywords":["lite","web components","vimeo"],"sideEffects":false,"types":"./lib/index.d.ts","main":"./lib/index.js","exports":{"import":"./lib/index.esm.js","require":"./lib/index.cjs"},"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":{"dev":"ESBUILD_WATCH=true node esbuild.mjs","build":"node esbuild.mjs","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint --ext .ts","lint:prettier":"prettier --check src/*.ts --ignore-path .gitignore","preinstall":"npx only-allow pnpm","prepare":"husky","semantic-release":"semantic-release"},"packageManager":"pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977","devDependencies":{"@commitlint/cli":"^19.8.1","@commitlint/config-conventional":"^19.8.1","@eslint/eslintrc":"^3.3.1","@eslint/js":"^9.26.0","@semantic-release/changelog":"^6.0.3","@semantic-release/git":"^10.0.1","@types/node":"^22.15.18","@typescript-eslint/eslint-plugin":"^8.32.1","@typescript-eslint/parser":"^8.32.1","esbuild":"^0.25.4","esbuild-plugin-clean":"^1.0.1","eslint":"^9.26.0","eslint-config-prettier":"^10.1.5","eslint-plugin-html":"^8.1.2","eslint-plugin-lit":"^2.1.1","eslint-plugin-node":"^11.1.0","eslint-plugin-prettier":"^5.4.0","globals":"^16.1.0","husky":"^9.1.7","npm-dts":"^1.3.13","prettier":"^3.5.3","semantic-release":"^24.2.3","tsx":"^4.19.4","typescript":"^5.8.3"},"_id":"@cshawaus/lite-vimeo@1.0.2","gitHead":"d57bef4b30d197c51f5ded9440f2d34c8366d9a6","_nodeVersion":"22.15.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-m512WiewFb3tlsIkAj1CO2wqISz0i8DHdzPAZRi1/tnWnp/dpK3zbekBS1RCIxIyS+Pri/tY25djXnOg7O+Asw==","shasum":"09b78bb37680a2b871604009272148a4e1337137","tarball":"https://registry.npmjs.org/@cshawaus/lite-vimeo/-/lite-vimeo-1.0.2.tgz","fileCount":7,"unpackedSize":41785,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@cshawaus%2flite-vimeo@1.0.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHslMgT8eN1vMYiglLFl2xYprsuq4u6+KqLOjdRnDB3bAiB8Cl2+JgfnWXjZiPYnvoqml9vE0/LhD/nsnEMgEDeaFw=="}]},"_npmUser":{"name":"c.shaw","email":"me@cshaw.xyz"},"directories":{},"maintainers":[{"name":"c.shaw","email":"me@cshaw.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lite-vimeo_1.0.2_1747228931591_0.3636660443336055"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-26T12:48:09.964Z","modified":"2025-05-14T13:22:12.213Z","1.0.0":"2023-10-26T12:48:10.327Z","1.0.1":"2023-10-26T14:31:34.102Z","1.0.2":"2025-05-14T13:22:11.805Z"},"bugs":{"url":"https://github.com/cshawaus/lite-vimeo/issues"},"author":{"name":"Chris Shaw","email":"me@cshaw.xyz"},"license":"MIT","homepage":"https://github.com/cshawaus/lite-vimeo","keywords":["lite","web components","vimeo"],"repository":{"type":"git","url":"git+https://github.com/cshawaus/lite-vimeo.git"},"description":"A fast drop-in web component replacement for Vimeo iframes that enables high-performance pages.","contributors":[{"name":"Alex Russell","email":"slightlyoff@gmail.com","url":"https://infrequently.org/"}],"maintainers":[{"name":"c.shaw","email":"me@cshaw.xyz"}],"readme":"# \\<lite-vimeo\\>\n\n<p>\n  <a href=\"https://npmjs.com/package/@cshawaus/lite-vimeo\"><img src=\"https://img.shields.io/npm/v/@cshawaus/lite-vimeo.svg\" alt=\"npm package\"></a>\n  <a href=\"https://nodejs.org/en/about/releases/\"><img src=\"https://img.shields.io/node/v/@cshawaus/lite-vimeo.svg\" alt=\"node compatility\"></a>\n</p>\n\n> A web component that displays Vimeo 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) based on Alex Russell's [\\<lite-vimeo\\>](https://github.com/cshawaus/lite-vimeo/) package.\n\nThis is basically a rebadge of Justin's component, but for Vimeo.\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\n## Install\n\nThis web component is built with ES modules in mind and is\navailable on NPM.\n\n```sh\npnpm i @cshawaus/lite-vimeo\n# or\nnpm i @cshawaus/lite-vimeo\n# or\nyarn add @cshawaus/lite-vimeo\n```\n\nAfter installing import into your project using the following:\n\n```js\nimport '@cshawaus/lite-vimeo'\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-vimeo')\n```\n\n## Usage with jsDelivr\n\nIf you want the paste-and-go version, you can simply load it via jsDelivr.\n\n```html\n<!-- always the latest version -->\n<script src=\"https://cdn.jsdelivr.net/npm/@cshawaus/lite-vimeo/lib/index.js\"></script>\n<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@cshawaus/lite-vimeo/lib/index.esm.js\"></script>\n\n<!-- pinned to a specific version -->\n<script src=\"https://cdn.jsdelivr.net/npm/@cshawaus/lite-vimeo@1.0.0/lib/index.js\"></script>\n<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@cshawaus/lite-vimeo@1.0.0/lib/index.esm.js\"></script>\n```\n\n## Basic Usage\n\n```html\n<lite-vimeo videoid=\"364402896\"></lite-vimeo>\n```\n\n## Add Video Title\n\n```html\n<lite-vimeo videoid=\"364402896\" videotitle=\"This is a video title\"></lite-vimeo>\n```\n\n## Change \"Play\" for Locale</h3>\n\n```html\n<lite-vimeo videoid=\"364402896\" videoplay=\"Mirar\" videotitle=\"Mis hijos se burlan de mi español\"></lite-vimeo>\n```\n\n## Customise Everything\n\nBring your own CSS to the party anc customise the web component to your liking.\n\n```html\n<style>\n  .vimeo-player {\n    margin: auto;\n    max-width: 1024px;\n    width: 100%;\n  }\n</style>\n<div class=\"vimeo-player\">\n  <lite-vimeo videoid=\"364402896\"></lite-vimeo>\n</div>\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.vimeo-player ::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## Set a video start time\n\n```html\n<!-- Start at 5 min, 30 seconds -->\n<lite-vimeo videoid=\"364402896\" start=\"5m30s\"></lite-vimeo>\n```\n\n## Auto load with `IntersectionObserver`\n\n`IntersectionObserver` is used to automatically load the Vimeo iframe when scrolled into view. This can reduce performance in some circumstances with multiple players on the same page.\n\n```html\n<lite-vimeo videoid=\"364402896\" autoload></lite-vimeo>\n```\n\n## Auto Play (requires auto load)\n\nWhen allowed by the browser the player will automatically start the vido upon it coming into view.\n\n```html\n<lite-vimeo videoid=\"364402896\" autoload autoplay></lite-vimeo>\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 Vimeo videoid                                                           | ``      |\n| `videotitle` | The title of the video                                                      | `Video` |\n| `videoplay`  | The title of the play button (for translation)                              | `Play`  |\n| `autoload`   | Use Intersection Observer to load iframe when scrolled into view            | `false` |\n| `autoplay`   | Video attempts to play automatically if auto-load set and browser allows it | `false` |\n| `start`      | Set the point at which the video should start, in seconds                   | `0`     |\n","readmeFilename":"README.md"}