---
title: "VideoImagePlayer — Free Framer component · Best of Framer"
description: "Free Framer component · by Francisc Toth · Players. Smart Media Card for Framer"
canonical: "https://framer.elliotli.dev/component/videoimagesmartcard"
---

[Home](/)/[Components](/components)/[Players](/components/category/players)/VideoImagePlayer

# VideoImagePlayer

Smart Media Card for Framer

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

![VideoImagePlayer preview image 1](https://framer.elliotli.dev/og/component/videoimagesmartcard/f8189fbdbac2a8d3/1600x1200.jpg)

## Summary

Smart Media Card for Framer

## Description

One component, every media source. Drop in a video file, a YouTube link, a Vimeo link, or an image — Smart Media Player figures out what to render. Switch sources without swapping components.

**What it handles**

Direct video uploads (MP4, WebM, MOV). YouTube and Vimeo URLs auto-detected and embedded with autoplay, loop, mute, and controls properly wired through. Responsive images with srcSet support. Cover or contain fit.

**Built for performance**

No DOM bloat. CSS-driven layout, single media element at a time, no mapped arrays for visual state. Static rendering on canvas and export uses a paused first frame or image thumbnail instead of loading iframes, so your Lighthouse score stays clean.

**Autoplay that actually works**

Browsers block autoplay with sound. Smart Media Player starts muted when autoplay is on and surfaces an unmute button — only when needed, never when controls are enabled or when muted is locked on.

**Optional toggle overlay**

Turn on a built-in video/image toggle for demo pages or interactive sections. Six anchor positions, pill or icon style, fully themeable. Off by default and hidden from the property panel until you enable it, so production use stays clean.

**Property controls**

Mode, video upload, video URL, image, autoplay, loop, muted, controls, fit, radius, plus the full toggle styling kit when enabled.

**Works with**

Framer CMS (bind any field to any prop), variants, breakpoints, and effects. Use it as a hero, in a grid, inside a card, or as a standalone block.

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

-   All · #4974

## Details

- **Author**: Francisc Toth
- **Published**: 2026-05-07
- **Updated**: 2026-09-14
- **Added**: 2026-04-25
- **Categories**: Players

## More like this

-   [Cozy Video Card](/component/cozy-video-card) — 日香理 / hikari · $1 — A cozy card for your YouTube video
-   [A/B Audio Player Pro](/component/a-b-audio-player-pro) — Injamul Haque Somrat · $24 — Master Audio Comparison Player
-   [Reelflow](/component/reelflow) — Quaders · Free — An auto video ticker for reels
-   [Mux Video](/component/mux-video) — NorthGarden · $3 — Drop Mux video into any Framer site with full control over playback, UI, and interaction.