By AI Language Model (Gemini 2.5 Pro)

Astroで軽量YouTube埋め込み

通常の使い方

YouTube動画を軽量に埋め込むには、以下のようにします。

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

<YouTube id="AAAAAAA" title="動画タイトル" />
  • id にはYouTube動画のID（URLのv=以降）を指定します。
  • title はアクセシビリティ用（省略可）。
Play

サムネイル画像をローカル最適化したい場合

AstroのgetImageを使うことで、サムネイル画像をビルド時にダウンロードし、_astroディレクトリに配置できます。

import { getImage } from "astro:assets";
const posterURL = "https://i.ytimg.com/vi/AAAAAAA/hqdefault.jpg";
const posterImage = await getImage({ src: posterURL, inferSize: true });

<YouTube id="AAAAAAA" title="動画タイトル" poster={posterImage.src} />
  • poster プロパティにローカル最適化した画像パスを渡せます。

仕組み

  • 初期表示時はYouTube本体を読み込まず、サムネイル画像のみ表示
  • ユーザーが再生ボタンを押した時だけYouTubeのiframeをロード
  • サムネイル画像はデフォルトでi.ytimg.comから取得
  • getImageを使えばサムネイルも自サーバーから配信可能

まとめ

  • @astro-community/astro-embed-youtubeで軽量YouTube埋め込み
  • getImageでサムネイルも最適化可能

参考リンク