埋め込みガイド

URL 構造

すべての GIF には埋め込み時に参照する 3 つの URL があります:

{ID} を 8 文字の GIF ID に置き換えてください (例: xK9mQ2pL)。

1. Markdown

GitHub README ファイルで最も一般的な形式。GIF 画像を詳細ページへのリンクで囲みます:

[![Demo](https://media.agentgif.com/ID.gif)](https://agentgif.com/ID)

中央揃えで (Markdown 内の GitHub フレーバー HTML):

<p align="center">
  <a href="https://agentgif.com/ID">
    <img src="https://media.agentgif.com/ID.gif" alt="demo" width="800">
  </a>
</p>

2. HTML <img>

サイズとスタイルを完全に制御するには、<img> タグで生の GIF URL を使用します:

<a href="https://agentgif.com/ID">
  <img src="https://media.agentgif.com/ID.gif"
       alt="Terminal demo"
       width="800"
       loading="lazy">
</a>

The loading="lazy" attribute defers loading until the image is near the viewport — useful for pages with multiple GIFs.

3. iframe (インタラクティブプレーヤー)

iframe 埋め込みには、テーマ切り替え、再生コントロール、キャストリプレイを備えたインタラクティブターミナルプレーヤーが含まれます:

<iframe
  src="https://agentgif.com/embed/ID/"
  width="800"
  height="500"
  frameborder="0"
  allow="clipboard-write"
  loading="lazy"
></iframe>

プレーヤーは親ページからダーク/ライトモードを自動検出します。クエリパラメーターでテーマを強制できます:

https://agentgif.com/embed/ID/?theme=dracula

4. スクリプトウィジェット (自動埋め込み)

div タグとスクリプトタグを 1 つ置くだけ — ウィジェットがすべてを自動的に処理します:

<div data-agentgif="ID"></div>
<script src="https://agentgif.com/widget.js" async></script>

ウィジェットはコンテナの幅に適応するレスポンシブプレーヤーをレンダリングします。1 ページに複数の埋め込みがある場合、同じスクリプトを共有します — 1 回だけ含めてください。

5. oEmbed

AgentGIF supports oEmbed for auto-discovery. Platforms like Notion, Slack, Discord, and WordPress can automatically render a rich preview when you paste an AgentGIF URL.

各 GIF ページの HTML <link> タグが自動発見を有効にします:

<link rel="alternate" type="application/json+oembed"
  href="https://agentgif.com/oembed?url=https://agentgif.com/ID&format=json" />

oEmbed エンドポイントに直接クエリ:

curl "https://agentgif.com/api/v1/oembed/?url=https://agentgif.com/ID&format=json"

レスポンス:

{
  "type": "photo",
  "version": "1.0",
  "title": "Docker Compose Up",
  "width": 1000,
  "height": 580,
  "url": "https://media.agentgif.com/ID.gif",
  "provider_name": "AgentGIF",
  "provider_url": "https://agentgif.com"
}

6. バッジ (SVG)

GIF にリンクするコンパクトな SVG バッジ。README ファイルのバッジ行で役立ちます:

<a href="https://agentgif.com/ID">
  <img src="https://agentgif.com/badge/ID.svg" alt="AgentGIF demo">
</a>

Markdown で:

[![AgentGIF](https://agentgif.com/badge/ID.svg)](https://agentgif.com/ID)

プラットフォーム別のヒント

GitHub README

GitHub は README ファイルで Markdown と HTML の両方をレンダリングします。最良の結果を得るには 中央揃え HTML パターン を使用してください — GIF を中央に配置し幅を制限します:

<p align="center">
  <a href="https://agentgif.com/ID">
    <img src="https://media.agentgif.com/ID.gif" alt="demo" width="800">
  </a>
</p>

GitHub は <iframe> と <script> タグを削除します — Markdown または HTML の <img> メソッドのみ使用してください。

See the full guide: How to Embed GIFs in GitHub README.

Notion

AgentGIF URL を Notion ページに直接ペーストします。Notion の oEmbed サポートがプレビューを自動レンダリングします。または、/embed ブロックを使用して埋め込み URL をペーストしてください。

Slack & Discord

GIF 詳細 URL (https://agentgif.com/ID) をペーストします。両プラットフォームとも oEmbed アンファーリングをサポートしており、GIF 画像を含むリッチプレビューを表示します。

ドキュメントサイト (Docusaurus、MkDocs、VitePress)

Markdown または HTML 埋め込みを使用してください。ほとんどのドキュメントジェネレーターは Markdown ファイル内の標準 HTML をサポートしています。ジェネレーターが iframe を削除しない場合は iframe 埋め込みも機能します。

レスポンシブサイズ

コンテナの幅に合わせてスケールするレスポンシブ埋め込みの場合:

<div style="max-width: 800px; margin: 0 auto;">
  <a href="https://agentgif.com/ID">
    <img src="https://media.agentgif.com/ID.gif"
         alt="demo"
         style="width: 100%; height: auto;">
  </a>
</div>

レスポンシブ iframe の場合は、アスペクト比を持つコンテナで囲んでください:

<div style="position: relative; padding-bottom: 58%; max-width: 800px;">
  <iframe src="https://agentgif.com/embed/ID/"
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
          frameborder="0"></iframe>
</div>