Images, Videos, and Embeds

Add image, video, and other HTML elements

Mintlify supports files up to 5 MB. To use larger files, consider a storage service like Cloudinary and embed in your Mintlify documentation.

Image

Using Markdown

The markdown syntax lets you add images using the following code

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

Note that the image file size must be less than 5MB. Otherwise, we recommend hosting on a service like Cloudinary or S3. You can then use that URL and embed.

Using 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 h-32 dark:hidden" src="/path/image-light.jpg" />
<img className="hidden h-32 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>

Although not required, we recommend adding the alt and title attributes to images for better SEO and accessibility. Learn more at image SEO.