Skip to main content

​
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" />
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>
⌘I