Images and Embeds

Add image, video, and other HTML elements

Image

Images are the most common way to add visual content to your documentation.

Basics

The markdown syntax lets you add images using the following code

![title](/path/image.jpg)

To make sure images are displayed correctly in production, add a forward slash to the image path (e.g. /path/image.jpg).

Note that the image file size must be less than 20MB. Otherwise, we recommend hosting on a CDN provider like S3, Cloudinary or a similar service.

Embeds

To get more customizability with images, you can also use embeds to add images.

<img height="200" src="/path/image.jpg" />

Disable Image Zoom

To disable the default zoom on click for images, add the noZoom property to image embeds.

<img height="200" noZoom src="/path/image.jpg" />

Linking Images

To link an image, for example to create a button on your docs, encompass the image in a link with the noZoom property. Images in a tags will automatically have a pointer cursor.

<a href="https://mintlify.com" target="_blank">
  <img height="200" noZoom src="/path/image.jpg" />
</a>

Dark Mode

To use separate images for light and dark mode, use Tailwind CSS to hide and show images.

<img className="block dark:hidden" src="/path/image-light.jpg" />
<img className="hidden dark:block" src="/path/image-dark.jpg" />

Related

For more information, we recommend the following sections:

Frame Component Reference

Read the reference for the Frame component

Videos

Mintlify supports HTML tags in Markdown. This is helpful if you prefer HTML tags to Markdown syntax, and lets you create documentation with infinite flexibility.

For YouTube videos use:

<iframe
  width="560"
  height="315"
  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>

For other videos, use:

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

To autoplay the video, use:

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full aspect-video"
  src="link-to-your-video.com"
></video>

Since Mintlify needs to adhere to the JSX syntax, double word attributes will need to be written in camelCase: autoPlay, playsInline.

iFrames

Loads another HTML page within the document.

<iframe src="https://www.youtube.com/embed/4KzFe50RQkQ"> </iframe>