Lite YouTube

npm install motion clsx tailwind-merge

import { clsx, type ClassValue } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

/* tailwind-merge must know the site's type scale (globals.css) is a font size, not a text color — otherwise
   cn("text-h6 text-muted-foreground") drops text-h6. */
const twMerge = extendTailwindMerge({
  extend: { classGroups: { "font-size": [{ text: ["display", "h1", "h2", "h3", "h4", "h5", "h6"] }] } },
});

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

/*
 * Lite YouTube — the video's thumbnail with a play button; YouTube's player is only loaded once someone clicks
 * (from the Findit "YouTube" embed). A YouTube iframe costs about a megabyte before anyone watches; this costs an
 * image. The player is embedded from youtube-nocookie.com, so YouTube sets no cookie until the click.
 * The play button is YouTube's own: dark grey at 80%, red on hover, as in the template.
 * By default the still comes from YouTube's own image host (i.ytimg.com); pass `poster` to serve your own instead,
 * and then nothing at all is requested from YouTube until someone presses play.
 */

/** The video id of a YouTube link (watch, youtu.be or embed) — or the id itself. */
function videoId(url: string) {
  return url.match(/(?:v=|youtu\.be\/|embed\/|shorts\/)([\w-]{11})/)?.[1] ?? (/^[\w-]{11}$/.test(url) ? url : undefined);
}

export type LiteYouTubeProps = {
  /** A YouTube URL or the bare video id. */
  url: string;
  /** The video's title: shown to screen readers and used as the player's title. */
  title: string;
  playLabel?: string;
  /** Thumbnail quality; "max" is sharper but missing on some videos. */
  thumbnail?: "sd" | "hq" | "max";
  /** Your own image instead of YouTube's thumbnail, so nothing is requested from YouTube before the click. */
  poster?: string;
  className?: string;
};

const files = { sd: "sddefault", hq: "hqdefault", max: "maxresdefault" } as const;

export function LiteYouTube({ url, title, playLabel = "Play", thumbnail = "sd", poster, className }: LiteYouTubeProps) {
  const id = videoId(url);
  const [playing, setPlaying] = React.useState(false);
  if (!id) return null;

  return (
    <div className={cn("relative aspect-video overflow-hidden rounded-lg bg-muted", className)}>
      {playing ? (
        <iframe
          title={title}
          src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1&rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`}
          allow="presentation; fullscreen; accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
          className="absolute inset-0 size-full border-0"
        />
      ) : (
        <button
          type="button"
          onClick={() => setPlaying(true)}
          aria-label={`${playLabel}: ${title}`}
          className="group absolute inset-0 cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-inset"
        >
          {/* eslint-disable-next-line @next/next/no-img-element -- the thumbnail is YouTube's own, loaded from its CDN */}
          <img
            src={poster ?? `https://i.ytimg.com/vi_webp/${id}/${files[thumbnail]}.webp`}
            alt=""
            className="absolute inset-0 size-full object-cover"
          />
          <svg aria-hidden viewBox="0 0 68 48" className="absolute top-1/2 left-1/2 h-12 w-[68px] -translate-x-1/2 -translate-y-1/2">
            <path
              d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"
              className="fill-[#212121] opacity-80 transition-[fill,opacity] duration-100 ease-[cubic-bezier(0.4,0,1,1)] group-hover:fill-[#f00] group-hover:opacity-100 group-focus-visible:fill-[#f00] group-focus-visible:opacity-100"
            />
            <path d="M 45,24 27,14 27,34" fill="#fff" />
          </svg>
        </button>
      )}
    </div>
  );
}