Videos and iframes
Reference for embedding videos and iframes using the Video and Iframe components.
Overview
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 for YouTube, Vimeo, Loom, and other video platforms. This is the default mode for platform videos.
<Video
src="https://www.youtube.com/embed/Reu01KxMSF0?si=Rf3PTfKp1hMn9qhX"
title="YouTube video player"
width="560"
height="315"
/>
Attributes
Video embed URL from platform.
Video player width in pixels.
Video player height in pixels.
Accessible title for screen readers.
Allow content to go fullscreen (default: true).
Load immediately instead of lazy loading (default: false).
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
Direct URL to video file (MP4, WebM, OGG).
Video player width in pixels.
Video player height in pixels.
Show video controls (default: true).
Auto-play video when page loads (default: false).
Start video muted (default: false).
Loop video continuously (default: false).
Image URL to display before video starts playing.
How much video to preload: none, metadata, auto.
Browser loading priority: high, low, auto.
CSS styles for alignment and positioning.
Iframe
Use for embedding external content like forms, tools, or interactive applications.
<Iframe
src="https://docs.google.com/forms/d/e/1FAIpQLSexample/viewform"
title="Feedback form"
width="100%"
height="600"
/>
Attributes
URL of external content to embed.
Iframe width (pixels or percentage).
Iframe height (pixels or percentage).
Accessible title for screen readers.
Allow content to go fullscreen (default: true).
Security restrictions (default: "allow-scripts allow-same-origin allow-presentation").
Load immediately instead of lazy loading (default: false).
CSS styles for alignment and positioning.
Platform support
Video platforms: YouTube, Vimeo, Loom, Wistia
Video formats: MP4, WebM, OGG
Common patterns: Accessibility titles, dimension specifications for layout stability, priority loading for above-fold content