A clickable media card that intelligently switches between image and YouTube video mode. Add a YouTube URL and a play button appears automatically — click to open the video in a full-screen overlay with autoplay. No URL means image-only mode with a full-screen image overlay on click. Built for portfolios, product showcases, team cards, and testimonials that need mixed media in a clean card format.
Dual mode — image only or YouTube video based on URL input
Accepts all YouTube URL formats — watch, youtube and embed URLs
Play button appears automatically when YouTube URL is provided
Click to open full-screen overlay — image or YouTube video with autoplay
16:9 aspect ratio maintained in overlay for optimal display
Click outside content area to close overlay
X button above content to close overlay
Configurable hover scale on image (1.0–1.5x)
Play button scales on hover with smooth transition
Toggle tag label on or off independently
Tag label with full font, border, background and text color controls
Bottom gradient overlay covering bottom 50% of card
All state updates wrapped in startTransition for React 18 performance
No dependencies
Media
Image — main background image
Hover Scale — image scale on hover (1.0–1.5x)
YouTube URL — optional · accepts youtube.com/watch, youtube , embed URLs
Tag
Tag — show/hide toggle
Text — tag label text
Tag Font — full typography controls
Text Color · Tag Border · Tag Background
Padding — tag distance from top-left edges (0–100px)
Play Button
Play Button Color — icon and border color
Play Button Size — diameter (40–200px)
Visual
Gradient Color — bottom overlay gradient color
Automatic YouTube video ID extraction from all URL formats
Converts to embed URL with autoplay parameter on overlay open
Conditional play button opacity based on YouTube URL presence
Image scale transition 0.25s ease · play button 0.2s ease
Fixed positioning overlay for full viewport coverage
startTransition for React 18 performance
SSR-safe window object guard
ARIA labels on close buttons · semantic HTML throughout
Portfolio galleries · Product showcases · Team member cards · YouTube video previews · Testimonial cards · Case study pages · Mixed media galleries · Course and tutorial cards
SEO Keywords
framer media card · framer youtube card · framer image card · framer lightbox component · framer video card · framer youtube embed · framer image overlay · framer video overlay · framer click overlay · framer portfolio card · framer media component · framer lightbox card · framer video popup · framer code component · framer image video component
Hamim Reza
