---
title: "Video Preview  — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Riccardo Fala · Galleries. Instant hover video previews"
canonical: "https://framer.elliotli.dev/component/video-preview-card"
---

[Home](/)/[Components](/components)/[Galleries](/components/category/galleries)/Video Preview

# Video Preview

Instant hover video previews

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

![Video Preview  preview image 1](https://framer.elliotli.dev/og/component/video-preview-card/84d073cd729ebd62/1600x1200.jpg)

## Summary

Instant hover video previews

## Description

### Turn static thumbnails into interactive video previews. Users can preview content on hover, then open a clean lightbox for full playback.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-hqnlrwvi-EvVpK1dIWo6hZRuf411O1hban0xu5A)

### What it’s for

-   **Portfolio websites**
    
-   **Course previews**
    
-   **Product showcases**
    
-   **Media galleries**
    

**What’s included**• Instant hover video preview• Click to open lightbox with autoplay• Progress bar and duration badge• Mute toggle• Automatic aspect ratio• Works with CMS collections

Hover to play uploaded videos instantly. Click to open a clean lightbox with autoplay. Includes a progress bar, duration badge, mute toggle, and automatic aspect ratio detection.

**Built for CMS collections. Connect your fields and it works without extra setup.**

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-hqnlrwvi-SG4rTpZzWZA7FB9no3pSA0c8z3zofr)

### How to use

-   **Add the component** - Drag the component onto your canvas
    
-   **Connect a video file** - Or paste a video URL
    
-   **Adjust settings** - (hover preview, lightbox, controls, progress colour, bar thickness, fonts)
    
-   **CMS** - If using CMS, bind fields from your collection
    

**That’s it.**

### Hover to preview, click to watch.

### On mobile, tap to preview, then tap again to watch.

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

-   All · #5724

## Details

- **Author**: Riccardo Fala
- **Price**: $9.00
- **Published**: 2026-04-27
- **Updated**: 2026-11-06
- **Added**: 2026-04-27
- **Categories**: Galleries

## More like this

-   [Geometry CMS Gallery](/component/geometry-cms-gallery) — Akshay M · $20 — Scroll-Animated Portfolio Gallery
-   [Fluid InfiniteScroll](/component/fluid-infinitescroll) — Atemo Art · $16 — LIQUID / PRISM Gallery
-   [Isometric Gallery](/component/isometric-gallery) — Edi Priatama · $5 — 3D image gallery
-   [HoverExpand Gallery](/component/hoverexpand-gallery) — piyush vichare · $2 — HoverExpand Gallery is a modern Framer component for creating interactive image galleries with smooth hover expansion.