Video Card

A customizable video card component with support for hover effects, aspect ratios, and playback controls.

Installation

1. Dependencies

npm install clsx tailwind-merge

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Video Card Code

Copy Video Card Code

VideoCard Props

Name	Type	Required	Default	Description
src	string	Yes	undefined	The source URL of the video.
poster	string	No	undefined	The URL of the poster image to display before the video plays.
aspectRatio	"square" \| "video" \| "vertical" \| "wide"	No	"video"	The aspect ratio of the video card.
autoPlay	boolean	No	false	Determines if the video should play automatically when loaded.
muted	boolean	No	true	Determines if the video should be muted.
loop	boolean	No	true	Determines if the video should loop when it ends.
controls	boolean	No	false	Determines if playback controls should be displayed.
playOnHover	boolean	No	true	Determines if the video should play when hovered.
scaleOnHover	boolean	No	true	Determines if the video card should scale slightly when hovered.
className	string	No	undefined	Additional class names for custom styling.