Video
A component for embedding videos with optional captions and custom styling
Overview
The Video component provides a simple way to embed videos in your application. It automatically converts URLs to embeddable iframe sources and supports optional captions and custom styling.
Use the Video component when you need to:
- Display hosted videos
- Add accessible video content with captions
The Video component currently only supports Google Drive URLs that will be passed through the url prop.
Examples
Basic Usage
The simplest usage requires only a url prop. The component will automatically convert the URL to an embeddable format.
With URL
The component automatically detects and converts Google Drive URLs that are passed via the url prop. Google Drive sharing URLs can end with either /view or /preview, the component will automatically convert /view URLs to /preview format for proper embedding. If url is not provided or is not a Google Drive URL, the component returns null and renders nothing.
Supported URL formats: Only Google Drive URLs are currently supported (e.g., https://drive.google.com/file/d/FILE_ID/view or https://drive.google.com/file/d/FILE_ID/preview). YouTube and other video platforms are not supported at this time.
With Default Caption
Add a caption below the video using the defaultCaption prop. The caption will automatically include the copyright notice.
With Name Prop
The name prop is used to generate an accessible title for the iframe. This improves screen reader support and accessibility.
With Custom ClassName
Apply custom styling using the className prop. This is useful for responsive sizing or layout-specific adjustments.
Complete Example
A complete example showing all props together:
Import
import { Video } from '@im/integral/components/styled';Props
Prop
Type