Videos and iframes

Overview

Use videos and iframes to embed rich, interactive content directly in your docs, such as:

• Product walkthroughs and demos (YouTube, Vimeo, Loom)

• Self-hosted video files (MP4, WebM, OGG)

• External tools and dashboards (forms, analytics, sandboxes)

In Documentation.AI you can:

• Use the Web Editor to paste links or embed codes and adjust layout visually.

• Use the Code Editor to write <Video> and <Iframe> components in MDX for full control.

For static images, see Images. For showing embed code examples (such as iframe snippets) as code instead of rendering them, use Code and Groups.

Using with Web Editor

Insert a video or iframe

1. Place your cursor on a new line in the Web Editor.

2. Type / and select Video.

3. In the Video URL or Embed Code dialog, paste either:

   • A video URL (YouTube, Vimeo, Loom, MP4 URL, etc.), or

   • An iframe embed code copied from another tool.

4. Click Insert Video. The video or iframe appears in your document.

You can use the same block for both direct video URLs and iframe-based embeds from other platforms.

Align and resize

Hover over the embedded video or iframe to reveal controls:

• Top-right toolbar

  • Alignment icon: Change alignment (for example, left, center, or right), similar to images.

  • Other actions: May include zoom or delete, depending on your configuration.

• Side drag handles

  • Drag the left or right handle to adjust the width.

  • The height adjusts automatically to keep the original aspect ratio for videos.

Use these controls to keep layouts consistent with nearby content and images.

Using with Code Editor

In the Code Editor, you work directly in MDX using the <Video> and <Iframe> components.

<Video> component (iframe mode)

Use iframe mode for platforms that provide an embed URL, such as YouTube, Vimeo, Loom, or Wistia.

<Video
  src="https://www.youtube.com/embed/Reu01KxMSF0"
  title="Feature overview video"
  width="672"
  height="378"
  allow-full-screen="true"
  style="width: 100%; max-width: 672px; height: auto;"
/>

Key props:

• src (string, required): Video embed URL from the platform.

• width / height (string): Player dimensions in pixels.

• title (string): Accessible title for screen readers.

• allow-full-screen (boolean-like): Allow fullscreen playback (defaults to true).

• priority (boolean-like): Load immediately instead of lazy loading.

• style (string): Inline styles for alignment and sizing.

<Video> component (HTML5 mode)

Use HTML5 mode for self-hosted video files, with native browser controls.

<Video
  src="https://example.com/video/feature-walkthrough.mp4"
  width="672"
  height="378"
  controls="true"
  poster="https://example.com/video/feature-walkthrough-poster.jpg"
  preload="metadata"
  fetchPriority="high"
  style="width: 100%; max-width: 672px; height: auto;"
/>

Additional props for HTML5 playback:

• controls (boolean-like): Show video controls (defaults to true).

• autoplay (boolean-like): Start playing when the page loads.

• muted (boolean-like): Start muted (often required for autoplay).

• loop (boolean-like): Loop playback.

• poster (string): Poster image shown before playback.

• preload (string): none, metadata, or auto.

• fetchPriority (string): high, low, or auto.

<Iframe> component

Use <Iframe> for non-video embeds such as forms, dashboards, and interactive tools.

<Iframe
  src="https://docs.google.com/forms/d/e/1FAIpQLSexample/viewform"
  title="Customer feedback form"
  width="100%"
  height="600"
  sandbox="allow-scripts allow-same-origin allow-presentation"
  allow-full-screen="true"
  style="border: 1px solid #e5e7eb; border-radius: 8px;"
/>

Key props:

• src (string, required): URL of the external content.

• width / height (string): Dimensions in pixels or percentages.

• title (string): Accessible title for screen readers.

• allow-full-screen (boolean-like): Allow fullscreen where supported.

• sandbox (string): Space-separated sandbox restrictions.

• priority (boolean-like): Load immediately instead of lazy loading.

• style (string): Inline styles for borders and layout.

Use Code and Groups when you want to show iframe snippets as examples rather than render them.

Advanced options

Platform support

Commonly used video sources:

• Video platforms: YouTube, Vimeo, Loom, Wistia

• Video formats (HTML5): MP4, WebM, OGG

Most platforms provide both a shareable URL and an iframe embed code; use whichever best matches your workflow (Web Editor block or MDX component).

Accessibility and layout best practices

• Always set a meaningful title on <Video> (iframe mode) and <Iframe> for better screen reader support.

• Specify width and height to improve layout stability and avoid content shifting as media loads.

• Use responsive styles (for example, style="width: 100%; max-width: 672px; height: auto;") so embeds look good on smaller screens.

• For important, above-the-fold media, consider priority="true" or fetchPriority="high"; otherwise, rely on lazy loading to keep pages fast.

Security considerations for iframes

• Use the sandbox attribute on <Iframe> to limit what embedded content can do.

• Start with a restrictive value and add only what you need, for example:

  • sandbox="allow-scripts allow-same-origin allow-presentation"

• Only embed content from origins you trust, especially when allowing scripts or same-origin access.