MediaCard

Image & YouTube card with overlay view

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

Image & YouTube card with overlay view