{"_id":"@alos-no/astro-media","_rev":"7-298b8e1409b5137985582f0fd3e62803","name":"@alos-no/astro-media","dist-tags":{"latest":"1.3.3"},"versions":{"1.0.0":{"name":"@alos-no/astro-media","version":"1.0.0","keywords":["astro-component","withastro","media","image","images","video","performance","seo"],"license":"GPL-3.0-only","_id":"@alos-no/astro-media@1.0.0","maintainers":[{"name":"alos","email":"accounts@alos.no"}],"homepage":"https://github.com/alos-no/astro-media#readme","bugs":{"url":"https://github.com/alos-no/astro-media/issues"},"dist":{"shasum":"d4d3129c16d58723c35ed104dfcaa743d3f02033","tarball":"https://registry.npmjs.org/@alos-no/astro-media/-/astro-media-1.0.0.tgz","fileCount":9,"integrity":"sha512-ZlVbL81RoeTU8Tx4mlwlVTYok9+gAmIvKfvbCMJEBL3nr7XrG1PWW7BNlDxFGU1qB2904+ZihRCYzPQtZR73ZA==","signatures":[{"sig":"MEQCIB5IKeSUlob1voe4uemAWwjZUQrhq/LYr2bTtnCdLslyAiBwv7+eYVEgwiJ6EqNtRWhSfkQ8biibKv3DjMBAMp8XIw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":51084},"type":"module","_from":"file:alos-no-astro-media-1.0.0.tgz","types":"./index.d.ts","engines":{"node":">=20.3.0 <21 || >=22.0.0"},"exports":{".":"./index.js","./SmartImage.astro":"./src/components/SmartImage.astro","./SmartVideo.astro":"./src/components/SmartVideo.astro"},"scripts":{"build":"tsc -p tsconfig.build.json","publish:dry":"npm publish --access public --dry-run"},"_npmUser":{"name":"alos","email":"accounts@alos.no"},"_resolved":"/tmp/c05fe205fa9d13ef85e8148050e18ce7/alos-no-astro-media-1.0.0.tgz","_integrity":"sha512-ZlVbL81RoeTU8Tx4mlwlVTYok9+gAmIvKfvbCMJEBL3nr7XrG1PWW7BNlDxFGU1qB2904+ZihRCYzPQtZR73ZA==","repository":{"url":"git+https://github.com/alos-no/astro-media.git","type":"git"},"_npmVersion":"10.9.3","description":"Reusable Astro media components: optimized images, and background video with HLS fallback.","directories":{},"sideEffects":false,"_nodeVersion":"22.19.0","dependencies":{"hls.js":"^1.6.11"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2"},"peerDependencies":{"astro":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/astro-media_1.0.0_1758955576629_0.7559271391288696","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@alos-no/astro-media","version":"1.1.0","keywords":["astro-component","withastro","media","image","images","video","performance","seo"],"license":"GPL-3.0-only","_id":"@alos-no/astro-media@1.1.0","maintainers":[{"name":"alos","email":"accounts@alos.no"}],"homepage":"https://github.com/alos-no/astro-media#readme","bugs":{"url":"https://github.com/alos-no/astro-media/issues"},"dist":{"shasum":"16216e333e665226c98590da3ef09b5bc1664160","tarball":"https://registry.npmjs.org/@alos-no/astro-media/-/astro-media-1.1.0.tgz","fileCount":9,"integrity":"sha512-fO0Pz346U8djPNK3GWfstyoCIzUfexF1QqCCBzqdoMKyeaxyOaV5N3wUzxG05+pHNgGOtGOS1faqbwPYK+UW9A==","signatures":[{"sig":"MEQCICACBgA6o7j+wut9MoexqdeoOEgBSeTSxfj0AHtJh/YfAiAtNuq7qROmt9/0jQgSnUACco4nGxi0DrOaMeUfcuwdfw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":53147},"type":"module","_from":"file:alos-no-astro-media-1.1.0.tgz","types":"./index.d.ts","engines":{"node":">=20.3.0 <21 || >=22.0.0"},"exports":{".":"./index.js","./SmartImage.astro":"./src/components/SmartImage.astro","./SmartVideo.astro":"./src/components/SmartVideo.astro"},"scripts":{"build":"tsc -p tsconfig.build.json","publish:dry":"npm publish --access public --dry-run"},"_npmUser":{"name":"alos","email":"accounts@alos.no"},"_resolved":"/tmp/a8e34c1748a8aeb2c4369546a3fb539c/alos-no-astro-media-1.1.0.tgz","_integrity":"sha512-fO0Pz346U8djPNK3GWfstyoCIzUfexF1QqCCBzqdoMKyeaxyOaV5N3wUzxG05+pHNgGOtGOS1faqbwPYK+UW9A==","repository":{"url":"git+https://github.com/alos-no/astro-media.git","type":"git"},"_npmVersion":"10.9.3","description":"Reusable Astro media components: optimized images, and background video with HLS fallback.","directories":{},"sideEffects":false,"_nodeVersion":"22.19.0","dependencies":{"hls.js":"^1.6.11"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2"},"peerDependencies":{"astro":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/astro-media_1.1.0_1759155724372_0.27087003842271073","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@alos-no/astro-media","version":"1.2.0","keywords":["astro-component","withastro","media","image","images","video","performance","seo"],"license":"GPL-3.0-only","_id":"@alos-no/astro-media@1.2.0","maintainers":[{"name":"alos","email":"accounts@alos.no"}],"homepage":"https://github.com/alos-no/astro-media#readme","bugs":{"url":"https://github.com/alos-no/astro-media/issues"},"dist":{"shasum":"a8f26d2b87184df21268beeb2cc23b280e8dabdc","tarball":"https://registry.npmjs.org/@alos-no/astro-media/-/astro-media-1.2.0.tgz","fileCount":9,"integrity":"sha512-y+n1lXq5YYRapFtxKO9Ro0BARrCyXVqQo52kRL7jqVgLrEQKBMcz30jKmzlKS+z9atuoR7V7M7FcVFPqLkFPZQ==","signatures":[{"sig":"MEUCIQDhwqcRUy8makfQrcZFe9p3vmDDn2uHxlK5Me4/ERJ37QIgN0Tw7KfQ+RAykq05yCK0f7sDL+6Tt7vcKdNzyrhouEk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66557},"type":"module","_from":"file:alos-no-astro-media-1.2.0.tgz","types":"./index.d.ts","engines":{"node":">=20.3.0 <21 || >=22.0.0"},"exports":{".":"./index.js","./SmartImage.astro":"./src/components/SmartImage.astro","./SmartVideo.astro":"./src/components/SmartVideo.astro"},"scripts":{"build":"tsc -p tsconfig.build.json","publish:dry":"npm publish --access public --dry-run"},"_npmUser":{"name":"alos","email":"accounts@alos.no"},"_resolved":"/tmp/ff4676013b2f56979865d2ddb8d156ed/alos-no-astro-media-1.2.0.tgz","_integrity":"sha512-y+n1lXq5YYRapFtxKO9Ro0BARrCyXVqQo52kRL7jqVgLrEQKBMcz30jKmzlKS+z9atuoR7V7M7FcVFPqLkFPZQ==","repository":{"url":"git+https://github.com/alos-no/astro-media.git","type":"git"},"_npmVersion":"10.9.3","description":"Reusable Astro media components: optimized images, and background video with HLS fallback.","directories":{},"sideEffects":false,"_nodeVersion":"22.19.0","dependencies":{"hls.js":"^1.6.11"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2"},"peerDependencies":{"astro":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/astro-media_1.2.0_1759515877544_0.2628881472810882","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@alos-no/astro-media","version":"1.3.0","keywords":["astro-component","withastro","media","image","images","video","performance","seo"],"license":"GPL-3.0-only","_id":"@alos-no/astro-media@1.3.0","maintainers":[{"name":"alos","email":"accounts@alos.no"}],"homepage":"https://github.com/alos-no/astro-media#readme","bugs":{"url":"https://github.com/alos-no/astro-media/issues"},"dist":{"shasum":"9f57ca7448124534ee0d93d836f4d2f01f9e8301","tarball":"https://registry.npmjs.org/@alos-no/astro-media/-/astro-media-1.3.0.tgz","fileCount":9,"integrity":"sha512-ZJ/OzB8HgVH9mQEY7xxxmssygfwGp4VeNrvhI7Y0phqigJBxD0+jhT702CYDBZvH/hJuwnVVbMdKrbkaw5ad3g==","signatures":[{"sig":"MEUCIGbg3Ue9YJlfvsiD97r+EaXEHbvoPSW9zoHXKp3A+UGLAiEA2KB6F3WNAnMuQjzfLYZ1FFgGhzZ/rbFGs/8N5WAx18s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":71024},"type":"module","_from":"file:alos-no-astro-media-1.3.0.tgz","types":"./index.d.ts","engines":{"node":">=20.3.0 <21 || >=22.0.0"},"exports":{".":"./index.js","./SmartImage.astro":"./src/components/SmartImage.astro","./SmartVideo.astro":"./src/components/SmartVideo.astro"},"scripts":{"build":"tsc -p tsconfig.build.json","publish:dry":"npm publish --access public --dry-run"},"_npmUser":{"name":"alos","email":"accounts@alos.no"},"_resolved":"/tmp/b4ded5046b094d3db12acc39fb14f0a3/alos-no-astro-media-1.3.0.tgz","_integrity":"sha512-ZJ/OzB8HgVH9mQEY7xxxmssygfwGp4VeNrvhI7Y0phqigJBxD0+jhT702CYDBZvH/hJuwnVVbMdKrbkaw5ad3g==","repository":{"url":"git+https://github.com/alos-no/astro-media.git","type":"git"},"_npmVersion":"10.9.3","description":"Reusable Astro media components: optimized images, and background video with HLS fallback.","directories":{},"sideEffects":false,"_nodeVersion":"22.19.0","dependencies":{"hls.js":"^1.6.11"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2"},"peerDependencies":{"astro":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/astro-media_1.3.0_1759535523018_0.5190516115075949","host":"s3://npm-registry-packages-npm-production"}},"1.3.1":{"name":"@alos-no/astro-media","version":"1.3.1","keywords":["astro-component","withastro","media","image","images","video","performance","seo"],"license":"GPL-3.0-only","_id":"@alos-no/astro-media@1.3.1","maintainers":[{"name":"alos","email":"accounts@alos.no"}],"homepage":"https://github.com/alos-no/astro-media#readme","bugs":{"url":"https://github.com/alos-no/astro-media/issues"},"dist":{"shasum":"a88f468b4115fb0fb0c84ebd638881851f0b5ae9","tarball":"https://registry.npmjs.org/@alos-no/astro-media/-/astro-media-1.3.1.tgz","fileCount":9,"integrity":"sha512-pVVJQAa3nXrLj0aWNivKqKAsr4QvfzTIz4beh4eIcxt8GdNgd9tEsZewRNu6Gt+XkaSpHs+CcUbi1iLwY4gDVw==","signatures":[{"sig":"MEUCIEPEyxM1O649Hffjqf7V0aRkw2HsfWOjVhVCPpy81nukAiEAlF7VAs1POPzkRmaeaC9oUNONYhUlkyxs3P9bWuXLFXI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":77057},"type":"module","_from":"file:alos-no-astro-media-1.3.1.tgz","types":"./index.d.ts","engines":{"node":">=20.3.0 <21 || >=22.0.0"},"exports":{".":"./index.js","./SmartImage.astro":"./src/components/SmartImage.astro","./SmartVideo.astro":"./src/components/SmartVideo.astro"},"scripts":{"build":"tsc -p tsconfig.build.json","publish:dry":"npm publish --access public --dry-run"},"_npmUser":{"name":"alos","email":"accounts@alos.no"},"_resolved":"/tmp/bc3c940d630a171a198458628ea2a7d8/alos-no-astro-media-1.3.1.tgz","_integrity":"sha512-pVVJQAa3nXrLj0aWNivKqKAsr4QvfzTIz4beh4eIcxt8GdNgd9tEsZewRNu6Gt+XkaSpHs+CcUbi1iLwY4gDVw==","repository":{"url":"git+https://github.com/alos-no/astro-media.git","type":"git"},"_npmVersion":"10.9.3","description":"Reusable Astro media components: optimized images, and background video with HLS fallback.","directories":{},"sideEffects":false,"_nodeVersion":"22.20.0","dependencies":{"hls.js":"^1.6.11"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2"},"peerDependencies":{"astro":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/astro-media_1.3.1_1759849120039_0.45481238360931875","host":"s3://npm-registry-packages-npm-production"}},"1.3.2":{"name":"@alos-no/astro-media","version":"1.3.2","keywords":["astro-component","withastro","media","image","images","video","performance","seo"],"license":"Apache-2.0","_id":"@alos-no/astro-media@1.3.2","maintainers":[{"name":"alos","email":"accounts@alos.no"}],"homepage":"https://github.com/alos-no/astro-media#readme","bugs":{"url":"https://github.com/alos-no/astro-media/issues"},"dist":{"shasum":"075805b7ac2b0aee0e9c262c8230eef9b22ce77e","tarball":"https://registry.npmjs.org/@alos-no/astro-media/-/astro-media-1.3.2.tgz","fileCount":9,"integrity":"sha512-m+gV3g2gu6Ch/v2udPG9THG+BAu6/Opcty4zOpF/b4rBkEYEelFZAvb7YPX4zfuytdeIIMOhIcEisjXj3xRfJQ==","signatures":[{"sig":"MEUCIQCEzs7klD4WmhOyRsooqnZFtwGFrSPRlEu7LhbqClJAwgIgfiEYn/qPIWaafJt08+TfpB7+q/rRLUCUAI19ScyFrgc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89491},"type":"module","_from":"file:alos-no-astro-media-1.3.2.tgz","types":"./index.d.ts","engines":{"node":">=20.3.0 <21 || >=22.0.0"},"exports":{".":"./index.js","./SmartImage.astro":"./src/components/SmartImage.astro","./SmartVideo.astro":"./src/components/SmartVideo.astro"},"scripts":{"build":"tsc -p tsconfig.build.json","publish:dry":"npm publish --access public --dry-run"},"_npmUser":{"name":"alos","email":"accounts@alos.no"},"_resolved":"/tmp/6d3913a3ea29f6f4dcf21af93c887364/alos-no-astro-media-1.3.2.tgz","_integrity":"sha512-m+gV3g2gu6Ch/v2udPG9THG+BAu6/Opcty4zOpF/b4rBkEYEelFZAvb7YPX4zfuytdeIIMOhIcEisjXj3xRfJQ==","repository":{"url":"git+https://github.com/alos-no/astro-media.git","type":"git"},"_npmVersion":"10.9.3","description":"Reusable Astro media components: optimized images, and background video with HLS fallback.","directories":{},"sideEffects":false,"_nodeVersion":"22.20.0","dependencies":{"hls.js":"^1.6.11"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2"},"peerDependencies":{"astro":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/astro-media_1.3.2_1759920478642_0.46636159874865046","host":"s3://npm-registry-packages-npm-production"}},"1.3.3":{"name":"@alos-no/astro-media","version":"1.3.3","type":"module","description":"Reusable Astro media components: optimized images, and videos with HLS fallback.","homepage":"https://github.com/Alos-no/Astro-Smart-Media","repository":{"type":"git","url":"git+https://github.com/Alos-no/Astro-Smart-Media.git"},"license":"Apache-2.0","engines":{"node":">=20.3.0 <21 || >=22.0.0"},"publishConfig":{"access":"public"},"sideEffects":false,"exports":{".":"./index.js","./SmartVideo.astro":"./src/components/SmartVideo.astro","./SmartImage.astro":"./src/components/SmartImage.astro"},"keywords":["astro-component","withastro","media","image","images","video","performance","seo"],"peerDependencies":{"astro":"^5.0.0"},"dependencies":{"hls.js":"^1.6.11"},"devDependencies":{"typescript":"^5.9.2"},"types":"./index.d.ts","scripts":{"build":"tsc -p tsconfig.build.json","publish:dry":"npm publish --access public --dry-run"},"_id":"@alos-no/astro-media@1.3.3","bugs":{"url":"https://github.com/Alos-no/Astro-Smart-Media/issues"},"_integrity":"sha512-tKdvLWbJy7tdioH9g8JWeaVD4ZkGyHh9PmCt0eFRnEH9qDXM+KKFgxACooYuAW1GSUMHno32EfAaMp4OZdzxkQ==","_resolved":"/tmp/c101fa40ed243048e4c5752222024050/alos-no-astro-media-1.3.3.tgz","_from":"file:alos-no-astro-media-1.3.3.tgz","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-tKdvLWbJy7tdioH9g8JWeaVD4ZkGyHh9PmCt0eFRnEH9qDXM+KKFgxACooYuAW1GSUMHno32EfAaMp4OZdzxkQ==","shasum":"3d56f57f8eb7122b387e3d4df9682bfc22842901","tarball":"https://registry.npmjs.org/@alos-no/astro-media/-/astro-media-1.3.3.tgz","fileCount":9,"unpackedSize":89486,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICX5fgzrWZZwxCqWzGYH7SpQ3rF6ndlTP8GK/NHZaSViAiEAqMeMeKwCFDhxD0uvGbmZMJBgsaCmGNmElHd8QEK9aHk="}]},"_npmUser":{"name":"alos","email":"accounts@alos.no"},"directories":{},"maintainers":[{"name":"alos","email":"accounts@alos.no"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/astro-media_1.3.3_1759921849792_0.03453706293037717"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-27T06:46:16.492Z","modified":"2025-10-08T11:10:50.211Z","1.0.0":"2025-09-27T06:46:16.822Z","1.1.0":"2025-09-29T14:22:04.569Z","1.2.0":"2025-10-03T18:24:37.742Z","1.3.0":"2025-10-03T23:52:03.216Z","1.3.1":"2025-10-07T14:58:40.264Z","1.3.2":"2025-10-08T10:47:58.828Z","1.3.3":"2025-10-08T11:10:50.000Z"},"bugs":{"url":"https://github.com/Alos-no/Astro-Smart-Media/issues"},"license":"Apache-2.0","homepage":"https://github.com/Alos-no/Astro-Smart-Media","keywords":["astro-component","withastro","media","image","images","video","performance","seo"],"repository":{"type":"git","url":"git+https://github.com/Alos-no/Astro-Smart-Media.git"},"description":"Reusable Astro media components: optimized images, and videos with HLS fallback.","maintainers":[{"name":"alos","email":"accounts@alos.no"}],"readme":"# Astro Media Components\n\n[![npm version](https://img.shields.io/npm/v/@alos-no/astro-media.svg)](https://www.npmjs.com/package/@alos-no/astro-media)\n[![License: Apache-2.0](https://img.shields.io/npm/l/@alos-no/astro-media.svg)](https://www.apache.org/licenses/LICENSE-2.0)\n\nA suite of high-performance, feature-rich media components for Astro. `` and `` are designed to simplify modern media workflows, and deliver optimized, responsive, and accessible images and videos with minimal configuration.\n\n## Installation\n\n```bash\n# pnpm\npnpm add @alos-no/astro-media\n\n# npm\nnpm install @alos-no/astro-media\n\n# yarn\nyarn add @alos-no/astro-media\n```\n\n---\n\n## `SmartImage`\n\nA highly reusable and responsive image component built on `astro:assets`. It simplifies generating multiple image formats and sizes, while providing sensible defaults and convenient features like a CSS-driven vignette and credit overlays.\n\n### Key Features\n\n- **Powered by `astro:assets`**: Leverages Astro's built-in image optimization pipeline for local assets.\n- **Automatic Responsive Images**: Generates multiple widths and modern formats (`AVIF`, `WebP`) with graceful fallbacks.\n- **Intelligent Defaults**: Automatically calculates optimal `widths` and `sizes` attributes based on the source image dimensions.\n- **Local & Remote Sources**: Seamlessly handles both optimized local `ImageMetadata` imports and standard remote image URLs.\n- **CSS Vignette Effect**: Apply a configurable, non-destructive vignette overlay to focus viewer attention.\n- **Image Credits**: Add a clean, unobtrusive credit overlay with configurable positioning.\n- **Advanced Layout Control**: Full control over `object-fit` and `object-position` via `fit` and `position` props.\n- **Correct Corner Clipping**: Intelligently handles CSS `border-radius` to ensure overlays and effects are clipped correctly.\n\n### Usage\n\n#### Basic Local Image\n\nImport your image and pass it to the `src` prop. The component handles the rest.\n\n```astro\n---\nimport { SmartImage } from \"@alos-no/astro-media\";\nimport heroImage from \"../assets/hero.jpg\";\n---\n\n\n```\n\n#### Remote Image\n\nWhen you pass a URL string to `src`, `SmartImage` renders a standard `` tag without optimization.\n\n```astro\n---\nimport { SmartImage } from \"@alos-no/astro-media\";\n---\n\n\n```\n\n#### Vignette Effect\n\nApply a subtle vignette to focus the viewer's attention. The `rounded-*` classes are automatically handled to ensure correct clipping.\n\n```astro\n---\nimport { SmartImage } from \"@alos-no/astro-media\";\nimport heroImage from \"../assets/hero.jpg\";\n---\n\n\n```\n\n#### Credit Overlay\n\nAdd a credit line to your image with configurable positioning.\n\n```astro\n---\nimport { SmartImage } from \"@alos-no/astro-media\";\nimport heroImage from \"../assets/hero.jpg\";\n---\n\n\n```\n\n### `SmartImage` Props\n\n| Prop | Type | Default | Description |\n| :----------------- | :---------------------------- | :----------------- | :--------------------------------------------------------------------------------- |\n| `src` | `ImageMetadata \\| string` | **Required** | Local image import or a remote image URL. |\n| `alt` | `string` | **Required** | Alt text for accessibility and SEO. |\n| `sizes` | `string` | `(generated)` | The `sizes` attribute. Defaults to a value generated from `widths`. |\n| `widths` | `number[]` | `(generated)` | Array of widths to generate. Defaults to optimal widths based on the source image. |\n| `formats` | `('avif' \\| 'webp' \\| ...)` | `['avif', 'webp']` | Array of image formats to generate. |\n| `quality` | `number` | `80` | Quality setting (1-100) for generated images. |\n| `class` | `string` | `''` | CSS classes for the root element. `rounded-*` classes are handled automatically. |\n| `style` | `string` | `''` | Inline styles for the component. |\n| `loading` | `\"lazy\" \\| \"eager\"` | `'lazy'` | The loading strategy for the image. |\n| `vignetteRadius` | `number` | `undefined` | The vignette's transparent center as a percentage (0-100). |\n| `vignetteStrength` | `number` | `undefined` | The vignette's dark outer edge opacity (0-1). |\n| `fit` | `'cover' \\| 'contain' \\| ...` | `'cover'` | Maps to CSS `object-fit`. |\n| `position` | `string` | `'center'` | Maps to CSS `object-position`. |\n| `credit` | `string` | `undefined` | Optional credit text overlay. |\n| `creditAnchor` | `'top-left' \\| ...` | `'bottom-right'` | Position of the credit overlay. |\n| `creditClass` | `string` | `undefined` | Override default CSS classes for the credit overlay. |\n| `creditStyle` | `string` | `undefined` | Override default inline styles for the credit overlay. |\n\n---\n\n## `SmartVideo`\n\nA component for rendering robust, performant, and SEO-friendly background videos. It handles modern streaming formats, browser autoplay policies, and provides multiple playback modes.\n\n### Key Features\n\n- **Adaptive HLS Streaming**: Uses `hls.js` for adaptive bitrate streaming, delivering the best quality for the user's connection.\n- **Graceful Fallbacks**: Automatically falls back to standard `.mp4` and `.webm` sources if HLS is unsupported or fails.\n- **Native HLS on Apple Devices**: Utilizes native HLS playback on Safari for optimal performance and battery life.\n- **Posters**: Supports configuring a poster for loading (typically low-quality placeholder) and on playback error (typically HQ poster that replaces the video).\n- **Performance-Aware Playback**:\n - **IntersectionObserver**: Autoplays video only when it's in the viewport to save resources and bandwidth.\n - **Play on Hover**: An alternative, engaging playback mode that plays video on mouseover.\n- **Optimized Poster Images**: Uses `` internally for the poster, enabling full optimization and effects like vignettes.\n- **Enhanced SEO**: Injects a JSON-LD `VideoObject` schema when `metadata` is provided, improving search engine visibility.\n- **Flexible Sizing**: The `sizeStrategy` prop controls container behavior for intrinsic, fill, or CSS-driven dimensions.\n- **Advanced Poster Control**: Configure separate, optimized images for the initial \"loading\" state and a higher-quality version for \"error\" states.\n- **Mobile-Specific Sources**: Provide an alternate `hlsMobileSrc` for optimized delivery on mobile devices.\n\n### Usage\n\n#### Basic HLS with Fallback\n\nProvide an HLS source and a fallback path (without extension). The component will attempt HLS streaming and fall back to MP4/WebM if needed.\n\n```astro\n---\nimport { SmartVideo } from \"@alos-no/astro-media\";\nimport posterImage from \"../assets/video-poster.jpg\";\n---\n\n
\n \n
\n```\n\n#### Play on Hover\n\nThe video will only play when the user's mouse is over the component.\n\n```astro\n---\nimport { SmartVideo } from \"@alos-no/astro-media\";\nimport posterImage from \"../assets/video-poster.jpg\";\n---\n\n
\n \n
\n```\n\n#### **Standard Controls**\n\nDisable autoplay and give the user full control with the browser's native video controls.\n\n```astro\n---\nimport { SmartVideo } from \"@alos-no/astro-media\";\nimport posterImage from \"../assets/video-poster.jpg\";\n---\n\n
\n \n
\n```\n\n#### SEO Metadata\n\nProvide structured data to generate a JSON-LD `VideoObject` schema that helps search engines understand your video content.\n\n```astro\n---\nimport { SmartVideo } from \"@alos-no/astro-media\";\nimport posterImage from \"../assets/video-poster.jpg\";\n---\n\n\n```\n\n### `SmartVideo` Props\n\n| Prop | Type | Default | Description |\n| :------------------- | :-------------------------------- | :----------- | :-------------------------------------------------------------------------------------------------------------- |\n| `src` | `string` | `undefined` | Base path for fallback `.mp4` and `.webm` video files (without extension). |\n| `hlsSrc` | `string` | `undefined` | URL to the HLS manifest (`.m3u8`). |\n| `hlsMobileSrc` | `string` | `undefined` | Alternate HLS manifest for mobile devices. |\n| `poster` | `string \\| ImageMetadata` | `undefined` | Poster image to display before playback. |\n| `class` | `string` | `''` | CSS classes for the root container. |\n| `autoplay` | `boolean` | `true` | Whether the video should attempt to autoplay. |\n| `loop` | `boolean` | `true` | Whether the video should loop. |\n| `muted` | `boolean` | `true` | Whether the video should be muted (required for autoplay in most browsers). |\n| `controls` | `boolean` | `false` | Whether to display native video controls. |\n| `playsinline` | `boolean` | `true` | Prevents fullscreen playback on iOS. |\n| `preload` | `'none' \\| 'metadata' \\| 'auto'` | `'metadata'` | How aggressively to preload the video. |\n| `playOnHover` | `boolean` | `false` | If true, video plays only on mouse hover. |\n| `posterLoadStrategy` | `'eager' \\| 'on-error'` | `'eager'` | When to render the poster: immediately (`eager`) or only on video error (`on-error`). |\n| `metadata` | `MetadataProps` | `undefined` | Rich metadata for SEO (JSON-LD `VideoObject`). |\n| `fit` | `'cover' \\| 'contain' \\| ...` | `'cover'` | CSS `object-fit` for the video and poster. |\n| `objectPosition` | `string` | `'center'` | CSS `object-position` for the video and poster. |\n| `sizeStrategy` | `'fill' \\| 'none' \\| 'intrinsic'` | `'fill'` | Defines how the component is sized within its parent. |\n| `tracks` | `Track[]` | `[]` | An array of text tracks (``) to add to the video. |\n| `img...` | `various` | | All props from `` are accepted for the poster (e.g., `imgSizes`, `imgWidths`, `imgVignetteRadius`). |\n| `errorImg...` | `various` | | Override `` props for the error poster (e.g., `errorImgSizes`, `errorImgQuality`). |\n\n## License\n\n[Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0)\n","readmeFilename":"README.md"}