"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface VideoEmbedProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string;
  description?: string;
  poster?: string;
  ratio?: "16/9" | "4/3" | "1/1" | "21/9";
}

const ratioClasses: Record<NonNullable<VideoEmbedProps["ratio"]>, string> = {
  "16/9": "aspect-[16/9]",
  "4/3": "aspect-[4/3]",
  "1/1": "aspect-square",
  "21/9": "aspect-[21/9]",
};

const PlayIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
    <path d="M8 5v14l11-7-11-7z" />
  </svg>
);

export function VideoEmbed({
  title = "Product overview",
  description = "A responsive embed with flexible aspect ratios.",
  poster = "https://images.unsplash.com/photo-1487014679447-9f8336841d58?auto=format&fit=crop&w=1200&q=80",
  ratio = "16/9",
  className,
  ...props
}: VideoEmbedProps) {
  const [isPlaying, setIsPlaying] = React.useState(false);
  const ratioClass = ratioClasses[ratio];

  return (
    <div
      className={cn(
        "flex w-full flex-col gap-4 rounded-2xl border border-border bg-card p-4",
        className
      )}
      {...props}
    >
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <p className="text-sm text-muted-foreground">Video embed</p>
          <h3 className="text-lg font-semibold text-foreground">{title}</h3>
          <p className="text-sm text-muted-foreground">{description}</p>
        </div>
        <span className="rounded-full border border-border bg-background px-3 py-1 text-xs text-muted-foreground">
          {ratio}
        </span>
      </div>

      <div
        className={cn(
          "relative overflow-hidden rounded-xl border border-border bg-muted",
          ratioClass
        )}
      >
        <img
          src={poster}
          alt={title}
          className="h-full w-full object-cover"
          loading="lazy"
        />

        {!isPlaying ? (
          <button
            type="button"
            onClick={() => setIsPlaying(true)}
            className="absolute inset-0 flex items-center justify-center bg-background/60 text-foreground transition hover:bg-background/70"
            aria-label="Play video"
          >
            <span className="flex items-center gap-3 rounded-full border border-border bg-background px-4 py-2 text-sm font-semibold">
              <PlayIcon className="h-4 w-4" />
              Play
            </span>
          </button>
        ) : (
          <div className="absolute inset-0 flex items-end justify-end p-4">
            <span className="rounded-full border border-border bg-background/90 px-3 py-1 text-xs text-muted-foreground">
              Playing preview
            </span>
          </div>
        )}
      </div>
    </div>
  );
}
Video Embed

Product overview

Dependencies

Files

Installation
