mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Ethan Palm
922620bacc
* update page * add info on styling with CSS * move styling info to Custom scripts
180 lines
3.9 KiB
Plaintext
180 lines
3.9 KiB
Plaintext
---
|
|
title: "Images and embeds"
|
|
description: "Add images, videos, and iframes"
|
|
icon: "image"
|
|
---
|
|
|
|
<Frame>
|
|
<img
|
|
className="rounded-xl"
|
|
src="https://mintlify-assets.b-cdn.net/bigbend.jpg"
|
|
alt="Photograph of a scenic landscape with purple flowers in the foreground, mountains in the background, and a blue sky with scattered clouds."
|
|
/>
|
|
</Frame>
|
|
|
|
## Images
|
|
|
|
Add images to provide visual context, examples, or decoration to your documentation.
|
|
|
|
### Basic image syntax
|
|
|
|
Use [Markdown syntax](https://www.markdownguide.org/basic-syntax/#images) to add images to your documentation:
|
|
|
|
```mdx
|
|
|
|
```
|
|
|
|
<Tip>
|
|
Always include descriptive alt text to improve accessibility and SEO. The alt text should clearly describe what the image shows.
|
|
</Tip>
|
|
|
|
Image files must be less than 20MB. For larger files, host them on a CDN service like [Amazon S3](https://aws.amazon.com/s3) or [Cloudinary](https://cloudinary.com).
|
|
|
|
### HTML image embeds
|
|
|
|
For more control over image display, use HTML `<img>` tags:
|
|
|
|
```html
|
|
<img
|
|
src="/images/dashboard.png"
|
|
alt="Main dashboard interface"
|
|
height="300"
|
|
className="rounded-lg"
|
|
/>
|
|
```
|
|
|
|
#### Disable zoom functionality
|
|
|
|
To disable the default zoom on click for images, add the `noZoom` property:
|
|
|
|
```html highlight="4"
|
|
<img
|
|
src="/images/screenshot.png"
|
|
alt="Descriptive alt text"
|
|
noZoom
|
|
height="200"
|
|
/>
|
|
```
|
|
|
|
#### Link images
|
|
|
|
To make an image a clickable link, wrap the image in an anchor tag and add the `noZoom` property:
|
|
|
|
```html
|
|
<a href="https://mintlify.com" target="_blank">
|
|
<img
|
|
src="/images/logo.png"
|
|
alt="Mintlify logo"
|
|
noZoom
|
|
height="100"
|
|
/>
|
|
</a>
|
|
```
|
|
|
|
<Note>
|
|
Images within anchor tags automatically display a pointer cursor to indicate they are clickable.
|
|
</Note>
|
|
|
|
#### Light and dark mode images
|
|
|
|
To display different images for light and dark themes, use Tailwind CSS classes:
|
|
|
|
```html
|
|
<!-- Light mode image -->
|
|
<img
|
|
className="block dark:hidden"
|
|
src="/images/light-mode.png"
|
|
alt="Light mode interface"
|
|
/>
|
|
|
|
<!-- Dark mode image -->
|
|
<img
|
|
className="hidden dark:block"
|
|
src="/images/dark-mode.png"
|
|
alt="Dark mode interface"
|
|
/>
|
|
```
|
|
|
|
## Videos
|
|
|
|
Mintlify supports [HTML tags in Markdown](https://www.markdownguide.org/basic-syntax/#html), giving you flexibility to create rich content.
|
|
|
|
<Tip>
|
|
Always include fallback text content within video elements for browsers that don't support video playback.
|
|
</Tip>
|
|
|
|
### YouTube embeds
|
|
|
|
Embed YouTube videos using iframe elements:
|
|
|
|
```html
|
|
<iframe
|
|
className="w-full aspect-video rounded-xl"
|
|
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>
|
|
```
|
|
|
|
<Frame>
|
|
<iframe
|
|
className="w-full aspect-video rounded-xl"
|
|
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>
|
|
</Frame>
|
|
|
|
### Self-hosted videos
|
|
|
|
Use the HTML `<video>` element for self-hosted video content:
|
|
|
|
```html
|
|
<video
|
|
controls
|
|
className="w-full aspect-video rounded-xl"
|
|
src="link-to-your-video.com"
|
|
></video>
|
|
```
|
|
|
|
### Autoplay videos
|
|
|
|
To autoplay a video, use:
|
|
|
|
```html
|
|
<video
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
className="w-full aspect-video rounded-xl"
|
|
src="/videos/demo.mp4"
|
|
></video>
|
|
```
|
|
|
|
<Note>
|
|
When using JSX syntax, write double-word attributes in camelCase: `autoPlay`, `playsInline`, `allowFullScreen`.
|
|
</Note>
|
|
|
|
## iframes
|
|
|
|
Embed external content using iframe elements:
|
|
|
|
```html
|
|
<iframe
|
|
src="https://example.com/embed"
|
|
title="Embedded content"
|
|
className="w-full h-96 rounded-xl"
|
|
></iframe>
|
|
```
|
|
|
|
## Related resources
|
|
|
|
<Card title="Frame component reference" icon="frame" horizontal href="/components/frames">
|
|
Learn how to use the Frame component for presenting images.
|
|
</Card>
|