Images & Videos

Enhanced image and video components with hover effects, fullscreen viewing, and responsive design.

Overview

You can display images and videos in your documentation with enhanced features like hover-to-zoom, fullscreen-on-click, and automatic aspect ratio maintenance.

Images

Basic Usage

Use the <DocImage> component:

Component Props

• src (required): Path to the image (relative to public/)
• alt (required): Alt text for accessibility
• caption (optional): Caption text displayed below the image
• width (optional): Image width in pixels
• height (optional): Image height in pixels

Features

• ✅ Maintains Aspect Ratio: Images are never flattened or distorted
• ✅ Hover Effect: Images slightly zoom on hover
• ✅ Fullscreen View: Click to view in fullscreen mode
• ✅ Responsive: Automatically adapts to screen size
• ✅ Caption Support: Optional caption below the image

Examples

Basic Image

MDX Syntax:

Rendered Result:

Loading image...

Image with Caption

MDX Syntax:

Rendered Result:

Loading image...

Image with Dimensions

MDX Syntax:

Rendered Result:

Loading image...

Complete Example

MDX Syntax:

Rendered Result:

Installation Steps

Step 1: Download the Package

Loading image...

Step 2: Run the Installer

Follow the installation wizard:

Loading video...

Step 3: Verify Installation

Loading image...

YouTube Videos

Basic Usage

Embed YouTube videos using the <YouTube> component:

Component Props

• url (required): YouTube video URL (supports multiple formats)
• caption (optional): Caption text displayed below the video
• autoplay (optional): Auto-play video (default: false)
• muted (optional): Mute video (default: false)
• controls (optional): Show video controls (default: true)
• loop (optional): Loop video (default: false)
• start (optional): Start time in seconds
• end (optional): End time in seconds

Supported URL Formats

The component supports various YouTube URL formats:

• https://youtu.be/VIDEO_ID
• https://www.youtube.com/watch?v=VIDEO_ID
• https://www.youtube.com/embed/VIDEO_ID
• https://youtube.com/watch?v=VIDEO_ID&t=123s
• https://www.youtube.com/shorts/VIDEO_ID

Features

• ✅ Responsive: Maintains 16:9 aspect ratio
• ✅ Privacy Enhanced: Uses YouTube's privacy-enhanced mode
• ✅ Lazy Loading: Videos load only when needed
• ✅ Caption Support: Optional caption below the video
• ✅ Custom Start/End: Set specific start and end times
• ✅ Autoplay Support: Optional autoplay (with mute for browser compatibility)

Examples

Basic YouTube Video

MDX Syntax:

Rendered Result:

YouTube Video with Caption

MDX Syntax:

Rendered Result:

YouTube Video with Start Time

MDX Syntax:

Rendered Result:

YouTube Video with Custom Settings

MDX Syntax:

Rendered Result:

Complete Example

Videos

Basic Usage

Use the <DocVideo> component:

Component Props

• src (required): Path to the video file (relative to public/)
• poster (optional): Path to poster/thumbnail image
• caption (optional): Caption text displayed below the video
• controls (optional): Show video controls (play, pause, volume, etc.)
• autoplay (optional): Auto-play video (default: false)
• loop (optional): Loop video (default: false)
• muted (optional): Mute video (default: false)

Features

• ✅ Video Controls: Play, pause, volume, fullscreen
• ✅ Poster Image: Show a thumbnail before playing
• ✅ Responsive: Maintains aspect ratio
• ✅ Caption Support: Optional caption below the video

Examples

Basic Video

MDX Syntax:

Rendered Result:

Loading video...

Video with Poster and Caption

MDX Syntax:

Rendered Result:

Loading video...

Autoplay Video (Muted)

MDX Syntax:

Rendered Result:

Loading video...

Complete Example

Using Regular Markdown Images

You can also use regular markdown image syntax, and it will automatically be converted to the enhanced image component:

File Organization

Organize your media files in the public/assets/ directory:

Best Practices

Images

1. File Location: Place images in public/assets/docs/images/ (for docs) or public/assets/blog/images/ (for blog)
2. Naming: Use descriptive, lowercase names with hyphens (e.g., dashboard-overview.png, installation-step-1.png)
3. Format: Use PNG for screenshots, JPG for photos, SVG for icons
4. Size: Optimize images before uploading (recommended max 2MB)
5. Aspect Ratio: Specify width/height to maintain proper proportions
6. Alt Text: Always provide descriptive alt text for accessibility
7. Organization: Group related assets in subdirectories for large documentation sections

Videos

1. File Location: Place videos in public/assets/docs/videos/ (for docs) or public/assets/blog/videos/ (for blog)
2. Format: Use MP4 format for best browser compatibility
3. Size: Compress videos to reasonable file sizes (recommended max 50MB)
4. Duration: Keep tutorial videos concise (2-5 minutes recommended)
5. Poster: Include a poster image for better UX
6. Naming: Use descriptive names matching the content (e.g., installation-tutorial.mp4)

YouTube Videos

1. URL Format: Use the short youtu.be format for cleaner URLs
2. Captions: Always provide descriptive captions for accessibility
3. Start/End Times: Use start and end props to highlight specific sections
4. Autoplay: Only use autoplay with muted for better user experience
5. Privacy: The component uses privacy-enhanced mode by default
6. Performance: Videos are lazy-loaded for better page performance

Complete Example

Next Steps

• Code Blocks - Learn about syntax highlighting
• Tabbed Content - Learn about multi-tab sections
• Excalidraw Diagrams - Learn about interactive diagrams