Skip to content

Latest commit

 

History

History
149 lines (110 loc) · 3.47 KB

image-embeds.mdx

File metadata and controls

149 lines (110 loc) · 3.47 KB
Raw
title description icon
Images, Videos, and Embeds
Add image, video, and other HTML elements
image

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:

<Card title="Frame Component Reference" icon="frame" href="/content/components/frames"

Read the reference for the Frame component

Videos

<iframe className="w-full aspect-video rounded-md" 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>

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](https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/).