---
title: "MediaCard — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Cards. Image & YouTube card with overlay view"
canonical: "https://framer.elliotli.dev/component/mediacard"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/MediaCard

# MediaCard

Image & YouTube card with overlay view

[View on Framer](https://framer.com/marketplace/components/mediacard/?via=elliot-li)

![MediaCard preview image 1](https://framer.elliotli.dev/og/component/mediacard/959eaf6c5ae39085/1600x1200.jpg)

## Summary

Image & YouTube card with overlay view

## Description

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
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-1xa9p554-IOYDtGjYYKUIC6UWXfirnpGft1UWAw)

## 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

## Rank history [How rankings work →](/terms#rankings)

-   All · #5723

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2026-04-10
- **Updated**: 2026-04-18
- **Added**: 2026-03-29
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards