https://github.com/richardnbanks/astro-loader-youtube
This package provides a YouTube video loader for the Astro Loader API
https://github.com/richardnbanks/astro-loader-youtube
astro astro-loader typescript withastro youtube youtube-api
Last synced: about 2 months ago
JSON representation
This package provides a YouTube video loader for the Astro Loader API
- Host: GitHub
- URL: https://github.com/richardnbanks/astro-loader-youtube
- Owner: richardnbanks
- License: mit
- Created: 2025-01-19T17:10:36.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-03-13T15:14:22.000Z (about 2 months ago)
- Last Synced: 2025-03-13T16:26:29.654Z (about 2 months ago)
- Topics: astro, astro-loader, typescript, withastro, youtube, youtube-api
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@richardnbanks/astro-loader-youtube
- Size: 244 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Astro YouTube Video Loader
This package provides a YouTube video loader for the [Astro Loader API](https://docs.astro.build/en/reference/content-loader-reference/). It allows you to load and parse YouTube video data and use the data in your Astro site.
## Installation
```sh
npm install @richardnbanks/astro-loader-youtube
```
```sh
pnpm add @richardnbanks/astro-loader-youtube
```
## Usage
This package requires Astro 5 or later (You can enable experimental support for the content loader API in astro 4.10 or later).
Firstly add the content loader to your content configuration:
```typescript
// src/content.config.ts
import { defineCollection } from "astro:content";
import { youtubeLoader } from "@richardnbanks/astro-youtube-loader";
const youtube = defineCollection({
loader: youtubeLoader({
channelId: import.meta.env.YOUTUBE_CHANNEL_ID,
apiKey: import.meta.env.YOUTUBE_API_KEY,
maxResults: 1,
}),
});
export const collections = { youtube };
```
Now just use it like any other content collection in astro:
```astro
---
import { getCollection, type CollectionEntry, render } from "astro:content";
import Layout from "../../layouts/Layout.astro";
const videos = await getCollection("youtube");
---
{
videos.map(async (video) => {
return (
);
})
}
```
## Options
The `youtubeLoader` function takes an options object with the following properties:
* channelId: The id of the channel you want to query videos from.
* apiKey: API Key for the [YouTube Data API](https://developers.google.com/youtube/v3/docs).
* maxResults (optional): The total number of videos you would like to fetch.
## Rendering videos with Astro Embed
You can use [Astro Embed](https://astro-embed.netlify.app/) to render YouTube videos for you.
```astro
---
import {getCollection} from "astro:content";
import {YouTube} from "astro-embed";
const videos = await getCollection("youtube");
---
{videos.map((video) => )}
```