Skip to content

image-embeds.mdx

Latest commit

 

History

History
183 lines (140 loc) · 4.25 KB

image-embeds.mdx

File metadata and controls

183 lines (140 loc) · 4.25 KB
title Images and embeds
description Add images, videos, and iframes
icon image

Add images, embed videos, and include interactive content with iframes to your documentation.

All static assets in your docs repository are automatically served at the appropriate path on your domain. For example, if you have /images/my-logo.png in your repo, the image will be available at https://docs.yoursite.com/images/my-logo.png.

Photograph of a scenic landscape with purple flowers in the foreground, mountains in the background, and a blue sky with scattered clouds.

Images

Add images to provide visual context, examples, or decoration to your documentation.

Basic image syntax

Use Markdown syntax to add images to your documentation:

![Alt text describing the image](/path/to/image.png)
Always include descriptive alt text to improve accessibility and SEO. The alt text should clearly describe what the image shows.

Image files must be less than 20MB. For larger files, host them on a CDN service like Amazon S3 or Cloudinary.

HTML image embeds

For more control over image display, use HTML <img> tags:

<img 
  src="/images/dashboard.png" 
  alt="Main dashboard interface"
  height="300"
  className="rounded-lg"
/>

Disable zoom functionality

To disable the default zoom on click for images, add the noZoom property:

<img 
  src="/images/screenshot.png" 
  alt="Descriptive alt text"
  noZoom 
  height="200"
/>

Link images

To make an image a clickable link, wrap the image in an anchor tag and add the noZoom property:

<a href="https://mintlify.com" target="_blank">
  <img 
    src="/images/logo.png" 
    alt="Mintlify logo"
    noZoom 
    height="100"
  />
</a>
Images within anchor tags automatically display a pointer cursor to indicate they are clickable.

Light and dark mode images

To display different images for light and dark themes, use Tailwind CSS classes:

<!-- Light mode image -->
<img 
  className="block dark:hidden" 
  src="/images/light-mode.png" 
  alt="Light mode interface"
/>

<!-- Dark mode image -->
<img 
  className="hidden dark:block" 
  src="/images/dark-mode.png" 
  alt="Dark mode interface"
/>

Videos

Mintlify supports HTML tags in Markdown, giving you flexibility to create rich content.

Always include fallback text content within video elements for browsers that don't support video playback.

YouTube embeds

Embed YouTube videos using iframe elements:

<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>
<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>

Self-hosted videos

Use the HTML <video> element for self-hosted video content:

<video
  controls
  className="w-full aspect-video rounded-xl"
  src="link-to-your-video.com"
></video>

Autoplay videos

To autoplay a video, use:

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full aspect-video rounded-xl"
  src="/videos/demo.mp4"
></video>
When using JSX syntax, write double-word attributes in camelCase: `autoPlay`, `playsInline`, `allowFullScreen`.

iframes

Embed external content using iframe elements:

<iframe 
  src="https://example.com/embed" 
  title="Embedded content"
  className="w-full h-96 rounded-xl"
></iframe>

Related resources

Learn how to use the Frame component for presenting images.