Images and embeds

Enrich your documentation with visuals, videos, and interactive embeds.

Display images, embed video content, or add interactive frames via iframes to supplement your docs.

Demo Image

Images

Images enhance documentation with context, illustration, or decorative visual cues.

Basic Image Syntax

Include an image in Markdown using the syntax below:

![Alt text](https://doccupine.com/demo.png)

Use clear, descriptive alt text for accessibility and better SEO. Alt text should describe the image’s appearance or content.

HTML image embeds

Embed images in your Markdown content using HTML syntax.

<img src="https://doccupine.com/demo.png" alt="Alt text">

Videos

Videos add a dynamic element to your documentation, engaging your audience and providing a more immersive experience.

YouTube Embed

To embed a YouTube video, use the following syntax:

<iframe
  className="aspect-video"
  src="https://www.youtube.com/embed/ResP_eVPYQo"
  title="YouTube video player"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

Self-hosted videos

Serve up your own video content using the <video> tag:

<video
  controls
  className="aspect-video"
  src="https://samplelib.com/lib/preview/mp4/sample-20s.mp4"
></video>

Autoplay and Looping

For demonstration videos that loop or start automatically, add attributes as shown:

<video
  controls
  className="aspect-video"
  src="https://samplelib.com/lib/preview/mp4/sample-20s.mp4"
  autoPlay
  muted
  loop
  playsInline
></video>
Callouts PreviousIconsNext