React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

MediaPreview

Embed media content with iframe support and fallback placeholder

Interactive Playground

Enter a media URL to preview embedded content

Quick Select:

Examples

Different media sources and states

YouTube Video

Vimeo Video

Loom Video

Error State (Placeholder)

Your media content will be displayed here

Features

  • ✓Iframe Embedding: Embeds media content using iframe with proper attributes
  • ✓Fallback Placeholder: Shows placeholder image when source is invalid or empty
  • ✓Responsive: 16:9 aspect ratio maintained across all screen sizes
  • ✓Multiple Platforms: Supports YouTube, Vimeo, Loom, and other iframe-compatible platforms
  • ✓Security: Includes sandbox and allow attributes for iframe security

API Reference

Props

embedUrl

string (optional) - The URL of the media to embed (YouTube, Vimeo, Loom, etc.)

urlError

boolean (optional) - Whether to show error state with placeholder (default: false)

embedType

string (optional) - CSS class name for iframe styling

embedStyle

React.CSSProperties (optional) - Inline styles for iframe

className

string (optional) - Additional CSS classes for the container

Usage Notes

Supported Platforms: The component works with any iframe-embeddable media platform. Common platforms include YouTube, Vimeo, and Loom.

URL Format: Use the embed URL format provided by the platform (e.g., https://www.youtube.com/embed/VIDEO_ID for YouTube, https://www.loom.com/embed/VIDEO_ID for Loom).

Fallback Behavior: If urlError is true or embedUrl is empty, a placeholder with icon and message is displayed instead of the iframe.

Aspect Ratio: The component maintains a 16:9 aspect ratio using padding-bottom technique for responsive sizing.