MediaCard

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.

Features

• 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

Property Controls

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

Technical Details

• 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

Use Cases

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