Richard Banks
Overview Repositories
5
 Projects Packages
1
 Public activity Starred repositories

@richardnbanks/astro-loader-youtube (0.0.5)

Published 2026-02-11 00:28:38 +00:00 by Richard Banks in richard/astro-loader-youtube

Installation

@richardnbanks:registry=
npm install @richardnbanks/astro-loader-youtube@0.0.5
"@richardnbanks/astro-loader-youtube": "0.0.5"

About this package

Astro YouTube Video Loader

This package provides a YouTube video loader for the Astro Loader API. It allows you to load and parse YouTube video data and use the data in your Astro site.

Installation

npm install @richardnbanks/astro-loader-youtube

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:

// src/content.config.ts
import { defineCollection } from "astro:content";
import { youtubeLoader } from "@richardnbanks/astro-loader-youtube";

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:

---
import { getCollection, type CollectionEntry, render } from "astro:content";
import Layout from "../../layouts/Layout.astro";
const videos = await getCollection("youtube");
---

<Layout>
  {
    videos.map(async (video) => {
      return (
        <section>
            <a href={"https://youtube.com/watch?v=" + video.id} title={video.title}>
                <img src={video.data.thumbnails.default.url} alt={video.title} />
            </a>
        </section>
      );
    })
  }
</Layout>

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.
  • maxResults (optional): The total number of videos you would like to fetch.

Rendering videos with Astro Embed

You can use Astro Embed to render YouTube videos for you.

---
import {getCollection} from "astro:content";
import {YouTube} from "astro-embed";

const videos = await getCollection("youtube");
---

{videos.map((video) => <YouTube id={video.id} />)}

Dependencies

Dependencies

ID Version
googleapis ^171.0.0

Development dependencies

ID Version
astro ^5.1.7
prettier ^3.4.2
typescript ^5.7.3

Peer dependencies

ID Version
astro ^4.0.0 || ^5.0.0

Keywords

astro astro-content-loader astro-loader youtube withastro
Details
npm
richard/astro-loader-youtube
2026-02-11 00:28:38 +00:00
4
Richard Banks
Project website
MIT
latest
2.9 KiB
Assets (1)
astro-loader-youtube-0.0.5.tgz 2.9 KiB
Versions (2) View all
0.0.5 2026-02-11
0.0.4 2026-02-11
Issues