Images & Videos

Use media when it helps readers understand something faster than text alone.

Overhead shot of moody plants — Photo by Nico Knaack on Unsplash

![Overhead shot of moody plants](/images/plants.jpg "Photo by [Nico Knaack](https://unsplash.com/@xoxnk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/background-pattern-JF70XoUqlpQ?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)")

Images

Basic image syntax

Use standard Markdown image syntax for most cases.

![Overhead shot of moody plants](/images/plants.jpg)

Add a caption

Add a quoted title in Markdown…

![Overhead shot of moody plants](/images/plants.jpg "Moody plants")

… or, alternatively, use the Image component with a title prop.

<Image  src="/images/plants.jpg"  alt="Overhead shot of moody plants"  title="Moody plants"/>

Constrain image size

Use the width prop on the Image component to set a max rendered width in pixels. This helps keep large portrait or landscape images from filling the full content width.

Surreal Architecture — Photo by Mehrab Sium on Unsplash

<Image  src="/images/surreal_architecture.jpg"  alt="Surreal Architecture"  title="Photo by [Mehrab Sium](https://unsplash.com/@mehrab_sium?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/arid-landscape-viewed-through-a-circular-window-in-a-cave-WFXNp8G8-7Q?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)"  width={350}/>

Disable click-to-zoom

Set zoom={false} using the Image component when you want the image to stay static and avoid opening the zoom overlay.

<Image  src="/images/plants.jpg"  alt="Overhead shot of moody plants"  title="Zoom disabled"  zoom={false}/>

Videos

Embed a video file

Use the HTML <video> tag when you have a hosted .mp4 file.

<video controls width="100%" className="rounded-xl">  <source    src="https://www.w3schools.com/html/mov_bbb.mp4"    type="video/mp4"  />  Your browser does not support the video tag.</video>

Embed a YouTube video

Use an iframe for YouTube or other hosted video platforms.

<iframe  className="w-full aspect-video rounded-xl"  src="https://www.youtube.com/embed/mnTU_hJoByA?si=rG61DwS-ggzPHJ_e"  title="YouTube video player"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"  allowFullScreen></iframe>