画像を追加し、動画を埋め込み、iframe でインタラクティブなコンテンツをドキュメントに組み込みます。 ドキュメントのリポジトリ内にあるすべての静的アセットは、ドメイン上の適切なパスで自動的に配信されます。たとえば、リポジトリに /images/my-logo.png がある場合、画像は https://docs.yoursite.com/images/my-logo.png で利用できます。
手前に紫の花、奥に山々、雲が点在する青空が広がる風景写真。

​
画像

ドキュメントに視覚的な文脈や例、装飾を加えるために画像を追加します。

​
基本的な画像の記法

ドキュメントに画像を追加するには、Markdownの記法を使用します： 
![Alt text describing the image](/path/to/image.png)
アクセシビリティとSEOを向上させるため、必ずわかりやすい代替テキスト（altテキスト）を設定してください。altテキストは、画像が何を示しているかを明確に記述する必要があります。
画像ファイルは20MB未満である必要があります。より大きなファイルは、Amazon S3 や Cloudinary などのCDNサービスでホスティングしてください。

​
HTML画像の埋め込み

画像の表示をより細かく制御するには、HTML の <img> タグを使用します: 
<img 
  src="/images/dashboard.png" 
  alt="Main dashboard interface"
  height="300"
  className="rounded-lg"
/>

​
ズーム機能を無効にする

画像をクリックしたときのデフォルトのズームを無効にするには、noZoom プロパティを追加します。 
<img 
  src="/images/screenshot.png" 
  alt="Descriptive alt text"
  noZoom 
  height="200"
/>
画像をクリック可能なリンクにするには、画像をアンカータグで囲み、noZoom プロパティを追加します: 
<a href="https://mintlify.com" target="_blank">
  <img 
    src="/images/logo.png" 
    alt="Mintlify logo"
    noZoom 
    height="100"
  />
</a>
アンカータグ内の画像には、自動的にポインターカーソルが表示され、クリック可能であることが示されます。

​
ライトモードとダークモードの画像

ライトテーマとダークテーマで異なる画像を表示するには、Tailwind CSSのクラスを使用します： 
<!-- ライトモードの画像 -->
<img 
  className="block dark:hidden" 
  src="/images/light-mode.png" 
  alt="ライトモードのインターフェース"
/>

<!-- ダークモードの画像 -->
<img 
  className="hidden dark:block" 
  src="/images/dark-mode.png" 
  alt="ダークモードのインターフェース"
/>

​
動画

Mintlify は Markdown での HTML タグをサポートしており、柔軟にリッチコンテンツを作成できます。
動画再生に対応していないブラウザに備えて、必ず video 要素内にフォールバック用のテキストコンテンツを含めてください。

​
YouTube の埋め込み

iframe 要素を使って YouTube 動画を埋め込みます： 
<iframe
  className="w-full aspect-video rounded-xl"
  src="https://www.youtube.com/embed/4KzFe50RQkQ"
  title="YouTube video player"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

​
自前ホスティング動画

自前でホスティングする動画コンテンツには、HTML の <video> 要素を使用します: 
<video
  controls
  className="w-full aspect-video rounded-xl"
  src="link-to-your-video.com"
></video>

​
動画の自動再生

動画を自動再生するには、次を使用します: 
<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full aspect-video rounded-xl"
  src="/videos/demo.mp4"
></video>
JSX 構文を使用する場合、複合語の属性は camelCase で記述します（例: autoPlay、playsInline、allowFullScreen）。

​
iframes

iframe 要素を使って外部コンテンツを埋め込みます: 
<iframe 
  src="https://example.com/embed" 
  title="Embedded content"
  className="w-full h-96 rounded-xl"
></iframe>

Frame コンポーネント リファレンス

画像を表示するための Frame コンポーネントの使い方を学びましょう。