Cómo añadir vídeos de YouTube a tu blog de Astro (SSG + SSR)

https://www.youtube.com/feeds/videos.xml?channel_id=YOUR_CHANNEL_ID

npm install fast-xml-parser

// src/loaders/youtube.ts
import type { Loader } from 'astro/loaders';
import { z } from 'astro/zod';
import { XMLParser } from 'fast-xml-parser';

export function youtubeVideosLoader(options: {
  channelId: string;
  maxVideos?: number;
}): Loader {
  return {
    name: 'youtube-videos-loader',
    load: async ({ store, parseData, logger }) => {
      const url = `https://www.youtube.com/feeds/videos.xml?channel_id=${options.channelId}`;
      const res = await fetch(url, { signal: AbortSignal.timeout(10_000) });

      if (!res.ok) {
        logger.error(`YouTube feed returned ${res.status}`);
        return; // keeps prior data in store, build won't fail
      }

      const xml = new XMLParser({ ignoreAttributes: false }).parse(
        await res.text()
      );
      const entries = (xml.feed?.entry ?? []).slice(0, options.maxVideos ?? 6);

      store.clear();
      for (const entry of entries) {
        const id = entry['yt:videoId'];
        const data = await parseData({
          id,
          data: {
            id,
            title: entry.title,
            published: new Date(entry.published),
            thumbnail: `https://i.ytimg.com/vi/${id}/hqdefault.jpg`,
            url: `https://www.youtube.com/watch?v=${id}`,
          },
        });
        store.set({ id, data, digest: JSON.stringify(data) });
      }
    },
    schema: z.object({
      id: z.string(),
      title: z.string(),
      published: z.date(),
      thumbnail: z.string(),
      url: z.url(),
    }),
  } satisfies Loader;
}

// src/content.config.ts
import { defineCollection } from 'astro:content';
import { youtubeVideosLoader } from './loaders/youtube';

export const collections = {
  youtube: defineCollection({
    loader: youtubeVideosLoader({
      channelId: import.meta.env.YOUTUBE_CHANNEL_ID,
      maxVideos: 6,
    }),
  }),
};

YOUTUBE_CHANNEL_ID=UCGsUtKhXsRrMvYAWm8q0bCg

npx astro sync

---
// src/components/YouTubeVideosSSG.astro
import { Icon } from "astro-icon/components";
import { Image } from "astro:assets";
import { getCollection } from "astro:content";

const videos = await getCollection("youtubeVideos");
const channelId = import.meta.env.YOUTUBE_CHANNEL_ID;
---

<section class="py-8 bg-white dark:bg-gray-900 rounded-lg">
  <div class="max-w-5xl mx-auto px-4 sm:px-6">
    <div class="text-center mb-8">
      <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4">
        Latest YouTube Videos
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-300">
        Check out our latest content on YouTube
      </p>
    </div>

    {videos.length === 0 ? (
      <div class="text-center py-8">
        <p class="text-gray-600 dark:text-gray-400">
          No videos found.
        </p>
      </div>
    ) : (
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {videos.map((video) => (
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-gray-200 dark:border-gray-700">
            <div class="relative">
              <a href={video.data.url} target="_blank" rel="noopener noreferrer">
                <Image
                  src={video.data.thumbnail}
                  alt={video.data.title}
                  width={320}
                  height={180}
                  class="w-full h-48 object-cover rounded-t-lg"
                  loading="lazy"
                  format="webp"
                />
              </a>
              <a href={video.data.url} target="_blank" rel="noopener noreferrer">
                <Icon
                  name="mdi:play-circle"
                  class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white w-16 h-16 drop-shadow-lg opacity-80 hover:opacity-100 transition-opacity"
                />
              </a>
            </div>
            <div class="p-4">
              <a href={video.data.url} target="_blank" rel="noopener noreferrer">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white line-clamp-2 mb-2 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                  {video.data.title}
                </h3>
              </a>
              <p class="text-sm text-gray-500 dark:text-gray-400">
                {video.data.published.toLocaleDateString("en-US", {
                  year: "numeric",
                  month: "short",
                  day: "numeric",
                })}
              </p>
            </div>
          </div>
        ))}
      </div>
    )}

    <div class="text-center mt-8">
      <a
        href={`https://www.youtube.com/channel/${channelId}`}
        target="_blank"
        rel="noopener noreferrer"
        class="inline-flex items-center px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors duration-300"
      >
        <Icon name="mdi:youtube" class="w-5 h-5 mr-2" />
        View All Videos
      </a>
    </div>
  </div>
</section>

<style>
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>

---
// src/pages/index.astro
import YouTubeVideosSSG from '../components/YouTubeVideosSSG.astro';
---

<html>
  <body>
    <YouTubeVideosSSG />
  </body>
</html>

---
// src/components/YouTubeVideosSSR.astro
import { Icon } from "astro-icon/components";

export interface Props {
  channelId: string;
  maxVideos?: number;
}

const { channelId, maxVideos = 6 } = Astro.props;

let videos: Array<{
  id: string;
  title: string;
  published: Date;
  thumbnail: string;
  url: string;
}> = [];
let error: string | null = null;

try {
  const response = await fetch(
    `https://www.youtube.com/feeds/videos.xml?channel_id=${channelId}`,
    { signal: AbortSignal.timeout(10_000) }
  );

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  const xmlText = await response.text();

  // Parse XML to extract video data
  const videoRegex =
    /<entry>.*?<yt:videoId>(.*?)<\/yt:videoId>.*?<title>(.*?)<\/title>.*?<published>(.*?)<\/published>.*?<\/entry>/gs;

  let match;
  while (
    (match = videoRegex.exec(xmlText)) !== null &&
    videos.length < maxVideos
  ) {
    const [, videoId, title, published] = match;
    videos.push({
      id: videoId,
      title: title
        .replace(/&amp;/g, "&")
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&quot;/g, '"')
        .replace(/&#39;/g, "'")
        .replace(/&apos;/g, "'"),
      published: new Date(published),
      thumbnail: `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`,
      url: `https://www.youtube.com/watch?v=${videoId}`,
    });
  }
} catch (err: any) {
  console.error("Error fetching YouTube videos:", err);
  error = err.message;
}
---

<section class="py-8 bg-white dark:bg-gray-900 rounded-lg">
  <div class="max-w-5xl mx-auto px-4 sm:px-6">
    <div class="text-center mb-8">
      <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4">
        Latest YouTube Videos
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-300">
        Check out our latest content on YouTube
      </p>
    </div>

    {error ? (
      <div class="text-center py-8">
        <p class="text-red-600 dark:text-red-400">
          Unable to load YouTube videos. Please try again later.
        </p>
      </div>
    ) : videos.length === 0 ? (
      <div class="text-center py-8">
        <p class="text-gray-600 dark:text-gray-400">
          No videos found.
        </p>
      </div>
    ) : (
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {videos.map((video) => (
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-gray-200 dark:border-gray-700">
            <div class="relative">
              <a href={video.url} target="_blank" rel="noopener noreferrer">
                <img
                  src={video.thumbnail}
                  alt={video.title}
                  width={320}
                  height={180}
                  class="w-full h-48 object-cover rounded-t-lg"
                  loading="lazy"
                />
              </a>
              <a href={video.url} target="_blank" rel="noopener noreferrer">
                <Icon
                  name="mdi:play-circle"
                  class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white w-16 h-16 drop-shadow-lg opacity-80 hover:opacity-100 transition-opacity"
                />
              </a>
            </div>
            <div class="p-4">
              <a href={video.url} target="_blank" rel="noopener noreferrer">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white line-clamp-2 mb-2 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                  {video.title}
                </h3>
              </a>
              <p class="text-sm text-gray-500 dark:text-gray-400">
                {video.published.toLocaleDateString("en-US", {
                  year: "numeric",
                  month: "short",
                  day: "numeric",
                })}
              </p>
            </div>
          </div>
        ))}
      </div>
    )}

    <div class="text-center mt-8">
      <a
        href={`https://www.youtube.com/channel/${channelId}`}
        target="_blank"
        rel="noopener noreferrer"
        class="inline-flex items-center px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors duration-300"
      >
        <Icon name="mdi:youtube" class="w-5 h-5 mr-2" />
        View All Videos
      </a>
    </div>
  </div>
</section>

<style>
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>

---
// src/pages/index.astro
import YouTubeVideosSSR from '../components/YouTubeVideosSSR.astro';
---

<html>
  <body>
    <!-- The server:defer directive makes this a server island -->
    <YouTubeVideosSSR
      server:defer
      channelId="UCGsUtKhXsRrMvYAWm8q0bCg"
      maxVideos={6}
    >
      <!-- Fallback content shown while the island loads -->
      <div class="text-center py-8">
        <p class="text-gray-500">Loading videos...</p>
      </div>
    </YouTubeVideosSSR>
  </body>
</html>

npx astro create-key

// astro.config.mjs
import { defineConfig, memoryCache } from 'astro/config';

export default defineConfig({
  cache: { provider: memoryCache() },
  routeRules: {
    '/': { maxAge: 300, swr: 60 },
  },
});

// astro.config.mjs
import { defineConfig, envField } from 'astro/config';

export default defineConfig({
  env: {
    schema: {
      YOUTUBE_API_KEY: envField.string({
        context: 'server',
        access: 'secret',
      }),
      YOUTUBE_CHANNEL_ID: envField.string({
        context: 'server',
        access: 'public',
      }),
    },
  },
});

import { YOUTUBE_API_KEY, YOUTUBE_CHANNEL_ID } from 'astro:env/server';

const res = await fetch(
  `https://www.googleapis.com/youtube/v3/channels?part=contentDetails&id=${YOUTUBE_CHANNEL_ID}&key=${YOUTUBE_API_KEY}`
);
const data = await res.json();
const uploadsPlaylistId =
  data.items[0].contentDetails.relatedPlaylists.uploads;

npm install @astro-community/astro-embed-youtube

import { YouTube } from '@astro-community/astro-embed-youtube';

<YouTube id="x6pjyeQ_6V0" />