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 accessability. Learn more at image
SEO.
Was this page helpful?