logo
ComponentsVideos and Iframes
Components

Videos and iframes

Reference for embedding videos and iframes using the editor UI and the Video / Iframe components.

Overview

Embed videos from platforms like YouTube, Vimeo, and Loom, or use self-hosted video files and interactive iframes.

You can work with rich media in two ways:

  • Editor UI: Paste a video URL or embed code and resize/align visually.

  • MDX: Use the <Video> and <Iframe> components directly.

Insert a video or iframe

  1. Place your cursor on a new line in the 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 from your video platform or other tool.

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

Align and resize

Hover over the embedded video 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 configuration.

  • Side drag handles

    • Handles on the left and right edges let you adjust the width of the video.

    • The height adjusts automatically to maintain the original aspect ratio.

Use this UI for both direct video URLs and <iframe> embed codes.

Use the Video component in MDX

Embed videos from platforms like YouTube, Vimeo, and Loom, or use self-hosted video files. The Video component handles both iframe embedding and HTML5 video playback.

Common use cases:

  • Platform videos (YouTube, Vimeo, Loom)

  • Self-hosted video files (MP4, WebM)

  • Interactive content and external applications

Video (iframe mode)

Use this mode for YouTube, Vimeo, Loom, and other video platforms that provide an embed URL.

<Video 
  src="https://www.youtube.com/embed/Reu01KxMSF0?si=Rf3PTfKp1hMn9qhX" 
  title="YouTube video player"
  width="560" 
  height="315"
/>

Attributes

path
srcstring
Required

Video embed URL from platform.

path
widthstring

Video player width in pixels.

path
heightstring

Video player height in pixels.

path
titlestring

Accessible title for screen readers.

path
allow-full-screenboolean

Allow content to go fullscreen (default: true).

path
priorityboolean

Load immediately instead of lazy loading (default: false).

path
stylestring

CSS styles for alignment and positioning.

Video (HTML5 mode)

Use for self-hosted video files (MP4, WebM, OGG) with native browser controls.

<Video 
  src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  width="560" 
  height="315"
  controls="true"
  poster="https://example.com/thumbnail.jpg"
/>

Attributes

path
srcstring
Required

Direct URL to video file (MP4, WebM, OGG).

path
widthstring

Video player width in pixels.

path
heightstring

Video player height in pixels.

path
controlsboolean

Show video controls (default: true).

path
autoplayboolean

Auto-play video when page loads (default: false).

path
mutedboolean

Start video muted (default: false).

path
loopboolean

Loop video continuously (default: false).

path
posterstring

Image URL to display before video starts playing.

path
preloadstring

How much video to preload: none, metadata, auto.

path
fetchPrioritystring

Browser loading priority: high, low, auto.

path
stylestring

CSS styles for alignment and positioning.

Iframe component in MDX

Use <Iframe> for embedding external content such as forms, dashboards, or interactive tools.

<Iframe 
  src="https://docs.google.com/forms/d/e/1FAIpQLSexample/viewform" 
  title="Feedback form"
  width="100%" 
  height="600"
/>

Attributes

path
srcstring
Required

URL of external content to embed.

path
widthstring

Iframe width (pixels or percentage).

path
heightstring

Iframe height (pixels or percentage).

path
titlestring

Accessible title for screen readers.

path
allow-full-screenboolean

Allow content to go fullscreen (default: true).

path
sandboxstring

Security restrictions (default: "allow-scripts allow-same-origin allow-presentation").

path
priorityboolean

Load immediately instead of lazy loading (default: false).

path
stylestring

CSS styles for alignment and positioning.

Platform support & best practices

Video platforms: YouTube, Vimeo, Loom, Wistia
Video formats: MP4, WebM, OGG

  • Use clear, descriptive titles for accessibility.

  • Specify width and height to improve layout stability.

  • Use priority/fetchPriority only for above-the-fold media.

  • Prefer the editor UI for quick embeds; switch to MDX components when you need full control.

Was this page helpful?
Built with Documentation.AI

Last updated 1 day ago