Media Card for Framer

A Framer card that handles YouTube, Vimeo, uploads, and images in one component.

Stop building three versions of the same card. This one takes whatever you give it — a YouTube link, a Vimeo URL, an uploaded .mp4, or an image — and renders it correctly. The right player loads automatically based on the source.

Visitors can switch between video and image with a built-in toggle. Useful for portfolios, case studies, and product pages where you want to show both. Hide the toggle in one click when you're shipping a layout that doesn't need it.

Why this exists

Most Framer card components handle video or image, never both. The ones that do handle video usually only support self-hosted files, so YouTube and Vimeo links break. This one doesn't.

What you get

• 1 production-ready Framer code component (.tsx)
• All sources supported: YouTube, Vimeo, video upload, direct video URL, image
• On-canvas video/image toggle, optional
• Property controls for radius, padding, aspect ratio, colors, and text
• Works in any layout, any container width
• TypeScript, fully typed
• One-time purchase, lifetime use

FAQ

Will this work in my existing Framer project? Yes. Drop the .tsx file into your project's code folder and it appears in your component library.

Do I need a YouTube or Vimeo Pro account? No. Standard links work. Vimeo background mode requires Plus or higher on some videos — that's a Vimeo restriction, not a component limitation.

Can I customize the toggle? Pill or icon style, custom accent color, or hide it entirely.

Refunds? No refunds. Digital product, delivered immediately.