@flamingo-stack/openframe-frontend-core 0.0.177 → 0.0.178

package/src/components/features/video-player.tsx

@@ -18,112 +18,6 @@ import { AlertCircleIcon } from '../icons-v2-generated/interface';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 
-/**
- * Extract a first-frame poster from a direct video file URL via an
- * off-DOM `<video>` + `<canvas>`. This is the most reliable way to get
- * a real thumbnail for ANY video regardless of encoding or moov atom
- * placement (which is what breaks the `#t=0.5` URL-hash trick on long
- * videos whose moov atom is written at the end of the file).
- *
- * Sequence:
- *   1. Create hidden `<video>` with `crossOrigin="anonymous"` (REQUIRED
- *      before setting src, otherwise the canvas is tainted).
- *   2. `loadedmetadata` → seek to 10% of duration (clamped 2s–30s).
- *   3. `seeked` → draw the frame to a canvas → export as data URL.
- *   4. Clean up the hidden video immediately.
- *
- * Falls back to `null` on CORS failure, decode error, or unsupported
- * video format. Callers should treat `null` as "no poster — show play
- * overlay without a thumbnail."
- */
-function useVideoFirstFramePoster(
-  url: string | undefined,
-  enabled: boolean,
-): string | null {
-  const [poster, setPoster] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!enabled || !url) {
-      setPoster(null);
-      return;
-    }
-    // Only direct video files — skip YouTube, Vimeo, HLS, etc.
-    const isDirectFile = /\.(mp4|webm|mov|m4v)(\?|#|$)/i.test(url);
-    if (!isDirectFile) {
-      setPoster(null);
-      return;
-    }
-
-    let cancelled = false;
-    const video = document.createElement('video');
-    video.crossOrigin = 'anonymous';
-    video.preload = 'metadata';
-    video.muted = true;
-    video.playsInline = true;
-    // Tags this hidden element so regression tests can detect the poster-extractor
-    // path being entered without false-positives from any other code that might
-    // happen to set crossOrigin on a <video>. See video-player.test.tsx.
-    video.setAttribute('data-poster-extractor', 'true');
-
-    const cleanup = () => {
-      video.removeAttribute('src');
-      try { video.load(); } catch { /* noop */ }
-    };
-
-    const onLoadedMetadata = () => {
-      if (cancelled) return;
-      // Seek to 10% of the video's duration (clamped between 2s and 30s).
-      // Many videos have a dark fade-in during the first 1-2 seconds;
-      // 10% is far enough to land on real content for both short clips
-      // (30s → 3s) and long recordings (30min → 3min, clamped to 30s).
-      const dur = video.duration || 10;
-      const target = Math.max(2, Math.min(dur * 0.1, 30));
-      video.currentTime = target;
-    };
-
-    const onSeeked = () => {
-      if (cancelled) return;
-      try {
-        const canvas = document.createElement('canvas');
-        canvas.width = video.videoWidth;
-        canvas.height = video.videoHeight;
-        const ctx = canvas.getContext('2d');
-        if (!ctx || !canvas.width || !canvas.height) {
-          cleanup();
-          return;
-        }
-        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        const dataUrl = canvas.toDataURL('image/jpeg', 0.82);
-        if (!cancelled) setPoster(dataUrl);
-      } catch (err) {
-        // Tainted canvas (CORS) or decode failure — silently give up.
-        console.warn('[VideoPlayer] first-frame extraction failed', err);
-      } finally {
-        cleanup();
-      }
-    };
-
-    const onError = () => {
-      cleanup();
-    };
-
-    video.addEventListener('loadedmetadata', onLoadedMetadata);
-    video.addEventListener('seeked', onSeeked);
-    video.addEventListener('error', onError);
-    video.src = url;
-
-    return () => {
-      cancelled = true;
-      video.removeEventListener('loadedmetadata', onLoadedMetadata);
-      video.removeEventListener('seeked', onSeeked);
-      video.removeEventListener('error', onError);
-      cleanup();
-    };
-  }, [url, enabled]);
-
-  return poster;
-}
-
 /**
  * Global CSS injection for iOS Safari native fullscreen captions.
  * Safari hides ::-webkit-media-text-track-container in fullscreen by default.
@@ -237,45 +131,32 @@ interface VideoPlayerProps {
   /** Label for the subtitle track (default: 'English') */
   subtitleLabel?: string;
   /**
-   * When true, defers all network activity for the video until the user clicks play:
-   *   - Skips the hidden-video first-frame poster extraction (no canvas dance)
-   *   - Sets `preload="none"` on the underlying `<video>` (zero bytes fetched on mount)
-   *   - On play-click, switches `preload="auto"` and synchronously calls `videoEl.play()`
-   *     inside the click handler to preserve the iOS Safari user-activation chain
+   * Controls how aggressively the browser preloads the video before the user
+   * presses play. Mirrors the underlying `<video preload>` attribute.
    *
-   * Use for testimonial/marketing videos where:
-   *   - The video may never be played (most visitors don't click)
-   *   - A real poster image is available (`poster` prop) so the user has something to look at
-   *   - You want to eliminate the redundant hidden-video metadata fetch that races
-   *     ReactPlayer's own metadata fetch
+   *   - `'auto'`     — browser may download the entire file. Use for hero
+   *                    videos that you expect every visitor to play.
+   *   - `'metadata'` — (default) browser fetches the moov atom + a few KB
+   *                    so dimensions, duration, and the first frame are
+   *                    ready by the time the user clicks. Tiny bandwidth
+   *                    cost vs. dramatic click→first-frame improvement.
+   *   - `'none'`     — zero bytes fetched until click. Opt in for modal
+   *                    videos that are rarely played.
    *
-   * Interaction semantics:
-   *   - `lazyMount + autoPlay` → `autoPlay` wins; lazyMount is ignored (caller has explicitly committed)
-   *   - `lazyMount + loop` → orthogonal; loop applies after first play
-   *   - `lazyMount + useNativeAspectRatio` → orthogonal; native aspect comes from the existing `<video>`
+   * Caveat for long videos with `moov` at the end (common for iPhone
+   * screen recordings): `'metadata'` may pull several MB before any frame
+   * decodes. Run a faststart remux on the source to eliminate this. For
+   * grid/list pages, gate mount with `useNearViewport` (lib hook) so only
+   * near-viewport bites mount + start their metadata fetch.
    *
-   * Behavior change for non-lazy callers (lazyMount=false): once `hasStarted=true`, preload
-   * dynamically promotes from `'metadata'` to `'auto'` for aggressive buffering. Browser
-   * dedupes ranged requests on the same resource so this is benign in practice.
-   *
-   * @default false
+   * @default 'metadata'
    */
-  lazyMount?: boolean;
+  preloadStrategy?: 'auto' | 'metadata' | 'none';
 }
 
 /** Playback speed options */
 const SPEED_OPTIONS = [0.5, 0.75, 1, 1.25, 1.5, 2] as const;
 
-/**
- * Grace period after a lazyMount click before we surface a play() failure to
- * the user via the error UI. Calibrated for the typical case where a slow
- * Supabase Storage origin takes 1-2s to first-byte, then ReactPlayer's React
- * state-driven .play() retry takes another ~500ms. Anything still paused
- * AND carrying an `HTMLMediaElement.error` after this window is genuinely
- * broken (codec mismatch, 404, CORS), not just slow.
- */
-const LAZY_MOUNT_PLAY_FAILURE_GRACE_MS = 2000;
-
 /** Format seconds to M:SS or H:MM:SS display */
 function formatTime(secs: number): string {
   if (!secs || !isFinite(secs)) return '0:00';
@@ -299,7 +180,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   srtContent,
   captionsUrl,
   subtitleLabel,
-  lazyMount = false,
+  preloadStrategy = 'metadata',
 }) => {
   // =========================================================================
   // Core state
@@ -323,10 +204,6 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   const hideTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const clickTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const iosFullscreenTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-  // Tracks the iOS lazyMount play() failure-escalation timer so unmount can
-  // cancel it. Without this, a click-then-navigate within the grace window
-  // would fire `setHasError` on a torn-down component (React 18 warns).
-  const lazyMountFailureTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
   // Subtitle + fullscreen state
   const [captionsEnabled, setCaptionsEnabled] = useState(true);
@@ -666,10 +543,11 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     handleTouchToggle();
   }, [hasStarted, handleTouchToggle]);
 
-  // Extract first frame as poster when no explicit poster provided.
-  // Skipped entirely in lazyMount mode (no hidden-video element, no canvas dance).
-  const extractedPoster = useVideoFirstFramePoster(url, !lazyMount && !hasStarted && !poster);
-  const effectivePoster = poster || extractedPoster || undefined;
+  // Posters come from the server (admin form thumbnail extraction or Mux
+  // poster URL post-Phase-2). The legacy hidden-`<video>` first-frame
+  // extractor was deleted — it competed with the main player for sockets
+  // on multi-bite pages and produced flaky CORS failures.
+  const effectivePoster = poster || undefined;
   const posterBgColor = useImageEdgeColor(effectivePoster);
 
   useEffect(() => {
@@ -679,7 +557,6 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
       clearTimeout(clickTimerRef.current);
       clearTimeout(hideTimeoutRef.current);
       clearTimeout(iosFullscreenTimerRef.current);
-      clearTimeout(lazyMountFailureTimerRef.current);
       isDraggingRef.current = false;
       if (dragListenersRef.current) {
         document.removeEventListener('mousemove', dragListenersRef.current.move);
@@ -707,39 +584,25 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   const handlePause = useCallback(() => setIsPlaying(false), []);
   const handleEnded = useCallback(() => setIsPlaying(false), []);
   const handlePlayClick = useCallback(() => {
-    // iOS user-activation belt-and-suspenders: when lazyMount is on, the React state
-    // updates below cause a re-render that promotes preload to 'auto' and triggers
-    // ReactPlayer's internal play() — but that play() call may run in a separate task
-    // from the click event, which iOS Safari treats as non-user-initiated.
-    // Calling .play() synchronously here preserves the user-activation flag.
+    // iOS user-activation belt-and-suspenders: react-player's `playing={isPlaying}`
+    // state-driven .play() runs in a state-update microtask, which Safari iOS
+    // treats as non-user-initiated. Calling .play() synchronously inside the
+    // click handler preserves the user-activation flag across all preload
+    // strategies. If the play() promise rejects (codec, autoplay policy), the
+    // underlying <video>'s `error` event fires and `handleError` surfaces the
+    // error UI — no separate grace timer needed.
     //
-    // Guards:
-    //   - `instanceof HTMLVideoElement` — `getInternalPlayer()` returns YouTube/Vimeo
-    //     iframe wrappers when those URL types are passed; we only want the native
-    //     <video> element for the file player path.
-    //   - `.catch` — escalates persistent failures to the error UI after a grace
-    //     period so users don't stare at a frozen poster forever (HEVC-in-MP4 on
-    //     Chrome/Firefox is the common cause; the admin form warns about this).
-    //   - Failure timer is stored in a ref so unmount can cancel it (otherwise
-    //     a click-then-navigate within the grace window would fire setHasError
-    //     on a torn-down component).
-    if (lazyMount) {
-      const native = playerRef.current?.getInternalPlayer();
-      if (native instanceof HTMLVideoElement) {
-        native.play().catch(() => {
-          // Allow React's state-driven play() one chance, then surface the failure.
-          clearTimeout(lazyMountFailureTimerRef.current);
-          lazyMountFailureTimerRef.current = setTimeout(() => {
-            if (native.paused && native.error) setHasError(true);
-          }, LAZY_MOUNT_PLAY_FAILURE_GRACE_MS);
-        });
-      } else if (process.env.NODE_ENV !== 'production') {
-        console.warn('[VideoPlayer] lazyMount sync play(): no native HTMLVideoElement yet');
-      }
+    // Guard: `getInternalPlayer()` returns YouTube/Vimeo iframe wrappers when
+    // those URL types are passed; we only act on the native <video> element.
+    const native = playerRef.current?.getInternalPlayer();
+    if (native instanceof HTMLVideoElement) {
+      native.play().catch(() => { /* error UI handled by ReactPlayer's onError */ });
+    } else if (process.env.NODE_ENV !== 'production') {
+      console.warn('[VideoPlayer] sync play(): no native HTMLVideoElement yet');
     }
     setHasStarted(true);
     setIsPlaying(true);
-  }, [lazyMount]);
+  }, []);
 
   const handleProgress = useCallback(({ played: p, loaded: l, playedSeconds }: { played: number; loaded: number; playedSeconds: number }) => {
     setPlayed(p);
@@ -859,7 +722,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
             onBufferEnd={handleBufferEnd}
             onProgress={handleProgress}
             progressInterval={200}
-            config={{ file: { attributes: { controlsList: 'nodownload', playsInline: true, preload: lazyMount && !hasStarted ? 'none' : (hasStarted ? 'auto' : 'metadata') } } }}
+            config={{ file: { attributes: { controlsList: 'nodownload', playsInline: true, preload: hasStarted ? 'auto' : preloadStrategy } } }}
             light={false}
             playsinline
           />

package/src/components/features/youtube-embed.tsx

@@ -1,27 +1,17 @@
 "use client";
 
-import React, { useState, useEffect } from 'react';
-import ReactPlayer from 'react-player/youtube';
-
-// Simple SVG icon components
-const Play = ({ size = 16, className }: { size?: number; className?: string }) => (
-  <svg width={size} height={size} fill="currentColor" viewBox="0 0 24 24" className={className}>
-    <polygon points="5,3 19,12 5,21"/>
-  </svg>
-);
-
-const Loader = ({ size = 16, className }: { size?: number; className?: string }) => (
-  <svg width={size} height={size} fill="none" stroke="currentColor" viewBox="0 0 24 24" className={className}>
-    <line x1="12" y1="2" x2="12" y2="6"/>
-    <line x1="12" y1="18" x2="12" y2="22"/>
-    <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/>
-    <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/>
-    <line x1="2" y1="12" x2="6" y2="12"/>
-    <line x1="18" y1="12" x2="22" y2="12"/>
-    <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/>
-    <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/>
-  </svg>
-);
+import React, { useRef, useState } from 'react';
+
+/**
+ * YouTube facade (lite-youtube-embed pattern). Renders poster + play
+ * button until clicked; on click, a real `<iframe>` is created via
+ * `document.createElement` synchronously so the user-activation chain
+ * holds and `autoplay=1` plays on Chrome / Safari / Firefox.
+ *
+ * Uses `youtube-nocookie.com` (GDPR-friendly) and `mqdefault` posters
+ * (`maxresdefault` returns a gray 200 placeholder when missing, which
+ * defeats `onError` fallback).
+ */
 
 interface YouTubeEmbedProps {
   videoId: string;
@@ -30,198 +20,99 @@ interface YouTubeEmbedProps {
   showTitle?: boolean;
   showMeta?: boolean;
   minimalControls?: boolean;
+  /** When true, the poster img gets `fetchpriority="high"` for LCP. Default false (below-the-fold). */
+  aboveTheFold?: boolean;
 }
 
-export const YouTubeEmbed: React.FC<YouTubeEmbedProps> = ({ 
-  videoId, 
-  title = "YouTube Video",
-  className = "",
+export const YouTubeEmbed: React.FC<YouTubeEmbedProps> = ({
+  videoId,
+  title = 'YouTube Video',
+  className = '',
   showTitle = true,
   showMeta = true,
-  minimalControls = false
+  minimalControls = false,
+  aboveTheFold = false,
 }) => {
-  const [isLoading, setIsLoading] = useState(true);
-  const [hasError, setHasError] = useState(false);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [useIframe, setUseIframe] = useState(false);
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-    
-    // Always use iframe to avoid CSP issues with ReactPlayer scripts
-    setUseIframe(true);
-    setIsLoading(false);
-  }, []);
-
-  const handleReady = () => {
-    setIsLoading(false);
-  };
+  const [activated, setActivated] = useState(false);
+  const iframeSlotRef = useRef<HTMLDivElement | null>(null);
 
-  const handleError = () => {
-    setIsLoading(false);
-    setHasError(true);
-    // Fallback to iframe on error
-    setUseIframe(true);
-  };
-
-  const handlePlay = () => {
-    setIsPlaying(true);
-  };
-
-  const handlePause = () => {
-    setIsPlaying(false);
-  };
-
-  const videoUrl = `https://www.youtube.com/watch?v=${videoId}`;
-  
-  // Build embed URL with conditional parameters
-  const embedParams = new URLSearchParams({
-    rel: '0',
-    modestbranding: '1',
-    playsinline: '1'
-  });
-  
+  const embedParams = new URLSearchParams({ autoplay: '1', rel: '0', modestbranding: '1', playsinline: '1' });
   if (minimalControls) {
-    embedParams.set('controls', '0'); // Hide all controls
-    embedParams.set('showinfo', '0'); // Hide video info
-    embedParams.set('fs', '0'); // Disable fullscreen
-    embedParams.set('iv_load_policy', '3'); // Hide annotations
-    embedParams.set('cc_load_policy', '0'); // Hide captions
-    embedParams.set('disablekb', '1'); // Disable keyboard controls
-    embedParams.set('rel', '0'); // Hide related videos (already set above, but ensure it's enforced)
-  }
-  
-  const embedUrl = `https://www.youtube.com/embed/${videoId}?${embedParams.toString()}`;
-
-  // Don't render until mounted to prevent hydration mismatch
-  if (!mounted) {
-    return (
-      <div className={`youtube-embed-container my-6 ${className}`}>
-        <div className="video-wrapper relative w-full" style={{ paddingBottom: '56.25%' }}>
-          <div className="loading-overlay absolute inset-0 bg-ods-card border border-ods-border rounded-lg flex items-center justify-center">
-            <div className="loading-content flex flex-col items-center gap-3">
-              <Loader className="animate-spin text-ods-accent" size={32} />
-              <span className="font-sans text-sm text-ods-text-secondary">Loading video...</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (hasError) {
-    return (
-      <div className={`youtube-embed-error ${className}`}>
-        <div className="error-state bg-ods-card border border-ods-error rounded-lg p-6 text-center my-6">
-          <div className="error-icon flex justify-center mb-4">
-            <svg width="48" height="48" fill="currentColor" viewBox="0 0 24 24" className="text-ods-error">
-              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-            </svg>
-          </div>
-          <div className="error-title font-sans font-semibold text-lg text-ods-error mb-2">
-            Video Unavailable
-          </div>
-          <div className="error-description font-sans text-sm text-ods-text-secondary mb-4">
-            Unable to load YouTube video. The video may be private or deleted.
-          </div>
-          <a
-            href={videoUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="error-retry-button bg-ods-error hover:bg-ods-error-hover text-ods-text-on-error border-none rounded px-4 py-2 font-sans font-medium text-sm cursor-pointer transition-colors duration-200"
-          >
-            Watch on YouTube
-          </a>
-        </div>
-      </div>
-    );
+    embedParams.set('controls', '0');
+    embedParams.set('showinfo', '0');
+    embedParams.set('fs', '0');
+    embedParams.set('iv_load_policy', '3');
+    embedParams.set('cc_load_policy', '0');
+    embedParams.set('disablekb', '1');
   }
+  const embedUrl = `https://www.youtube-nocookie.com/embed/${videoId}?${embedParams.toString()}`;
+  const watchUrl = `https://www.youtube.com/watch?v=${videoId}`;
+  const posterJpg = `https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`;
+  const posterWebp = `https://i.ytimg.com/vi_webp/${videoId}/mqdefault.webp`;
+
+  // `iframeSlotRef` is a JSX-empty div React owns but never reconciles
+  // children into; the `<button>` overlay is a SIBLING of that slot, not
+  // a child. Without that split, React would yank the button on
+  // re-render and trip `removeChild ... is not a child of this node`.
+  const handleActivate = () => {
+    const slot = iframeSlotRef.current;
+    if (!slot || activated) return;
+    const iframe = document.createElement('iframe');
+    iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
+    iframe.setAttribute('allowfullscreen', '');
+    iframe.setAttribute('title', title);
+    iframe.className = 'absolute inset-0 w-full h-full border-0';
+    iframe.src = embedUrl;
+    slot.appendChild(iframe);
+    setActivated(true);
+  };
 
   return (
     <div className={`youtube-embed-container my-6 ${className}`}>
-      {/* Video Title */}
       {title && showTitle && (
         <div className="video-title font-sans text-lg font-medium text-ods-text-primary mb-3">
           {title}
         </div>
       )}
 
-      {/* Video Container with 16:9 Aspect Ratio */}
       <div className="video-wrapper relative w-full" style={{ paddingBottom: '56.25%' }}>
-        {/* Loading State */}
-        {isLoading && (
-          <div className="loading-overlay absolute inset-0 bg-ods-card border border-ods-border rounded-lg flex items-center justify-center">
-            <div className="loading-content flex flex-col items-center gap-3">
-              <Loader className="animate-spin text-ods-accent" size={32} />
-              <span className="font-sans text-sm text-ods-text-secondary">Loading video...</span>
-            </div>
-          </div>
-        )}
-
-        {/* Video Player */}
-        <div className="video-player absolute inset-0 rounded-lg overflow-hidden border border-ods-border bg-ods-bg-inverse">
-          {useIframe ? (
-            // Iframe fallback for mobile and error cases
-            <iframe
-              src={embedUrl}
-              title={title}
-              className="w-full h-full border-0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-              allowFullScreen
-              style={{ border: 'none' }}
-            />
-          ) : (
-            <ReactPlayer
-              url={videoUrl}
-              width="100%"
-              height="100%"
-              onReady={handleReady}
-              onError={handleError}
-              onPlay={handlePlay}
-              onPause={handlePause}
-              config={{
-                youtube: {
-                  playerVars: {
-                    autoplay: 0,
-                    controls: 1,
-                    rel: 0,
-                    showinfo: 0,
-                    modestbranding: 1,
-                    iv_load_policy: 3,
-                    cc_load_policy: 0,
-                    playsinline: 1
-                  }
-                }
-              } as any}
-              light={false} // Show video immediately
-              playing={false} // Don't autoplay
-            />
-          )}
-        </div>
-
-        {/* Custom Play Button Overlay (optional enhancement) - only for ReactPlayer */}
-        {!useIframe && !isPlaying && !isLoading && (
-          <div className="play-overlay absolute inset-0 flex items-center justify-center bg-ods-bg-inverse bg-opacity-20 rounded-lg transition-opacity duration-300 hover:bg-opacity-30">
-            <button 
-              onClick={() => setIsPlaying(true)}
-              className="play-button bg-ods-accent hover:bg-ods-accent-hover text-ods-text-on-accent w-16 h-16 rounded-full flex items-center justify-center transition-all duration-200 transform hover:scale-110 shadow-lg"
-              aria-label="Play video"
+        <div className="absolute inset-0 rounded-lg overflow-hidden border border-ods-border bg-ods-card">
+          <div ref={iframeSlotRef} className="absolute inset-0" aria-hidden={!activated} />
+          {!activated && (
+            <button
+              type="button"
+              aria-label={`Play: ${title}`}
+              onClick={handleActivate}
+              className="group absolute inset-0 p-0 m-0 border-0 cursor-pointer bg-transparent"
             >
-              <Play size={24} className="ml-1" />
+              <picture>
+                <source type="image/webp" srcSet={posterWebp} />
+                <img
+                  src={posterJpg}
+                  alt={title}
+                  loading="lazy"
+                  fetchPriority={aboveTheFold ? 'high' : 'low'}
+                  decoding={aboveTheFold ? 'sync' : 'async'}
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+              </picture>
+              <div className="absolute inset-0 flex items-center justify-center bg-ods-bg-inverse bg-opacity-20 transition-opacity duration-200 group-hover:bg-opacity-30">
+                <span className="flex items-center justify-center w-16 h-16 rounded-full bg-ods-accent text-ods-text-on-accent shadow-lg transition-transform duration-200 group-hover:scale-110">
+                  <svg width={24} height={24} fill="currentColor" viewBox="0 0 24 24" className="ml-1">
+                    <polygon points="5,3 19,12 5,21" />
+                  </svg>
+                </span>
+              </div>
             </button>
-          </div>
-        )}
+          )}
+        </div>
       </div>
 
-      {/* Video Meta Information */}
       {showMeta && (
         <div className="video-meta flex items-center justify-between mt-3 text-sm text-ods-text-secondary">
-          <div className="video-platform font-sans">
-            YouTube
-          </div>
+          <div className="video-platform font-sans">YouTube</div>
           <a
-            href={videoUrl}
+            href={watchUrl}
             target="_blank"
             rel="noopener noreferrer"
             className="video-link font-sans text-ods-accent hover:text-ods-accent-hover transition-colors duration-200"
@@ -234,42 +125,34 @@ export const YouTubeEmbed: React.FC<YouTubeEmbedProps> = ({
   );
 };
 
-// Utility function to extract YouTube video ID from various URL formats
+const YT_HOSTS = new Set([
+  'youtube.com', 'www.youtube.com', 'm.youtube.com',
+  'youtu.be',
+  'youtube-nocookie.com', 'www.youtube-nocookie.com',
+]);
+
+// `youtube.com/(embed|v|shorts)/<id>` — anchored, no `.*`, ReDoS-safe.
+const YT_PATH_RE = /^\/(?:embed|v|shorts)\/([^/]+)\/?$/;
+
+/**
+ * Extract the YouTube video id from any common URL shape. Uses `URL`
+ * parsing + a strict, anchored pathname regex — NOT the previous
+ * `.*v=` pattern that CodeQL flagged for polynomial-time backtracking
+ * on adversarial input like `youtube.com/watch?` repeated N times.
+ */
 export const extractYouTubeId = (url: string): string | null => {
-  const patterns = [
-    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
-    /youtube\.com\/v\/([^&\n?#]+)/,
-    /youtube\.com\/watch\?.*v=([^&\n?#]+)/
-  ];
-
-  for (const pattern of patterns) {
-    const match = url.match(pattern);
-    if (match) {
-      return match[1];
-    }
+  let u: URL;
+  try { u = new URL(url); } catch { return null; }
+  if (!YT_HOSTS.has(u.hostname.toLowerCase())) return null;
+  // `youtu.be/<id>` — id is the first path segment.
+  if (u.hostname.toLowerCase().endsWith('youtu.be')) {
+    return u.pathname.split('/').filter(Boolean)[0] ?? null;
   }
-
-  return null;
+  // `youtube.com/watch?v=<id>` — query parameter.
+  const v = u.searchParams.get('v');
+  if (v) return v;
+  // `youtube.com/(embed|v|shorts)/<id>` — anchored pathname match.
+  const m = u.pathname.match(YT_PATH_RE);
+  return m ? m[1] : null;
 };
 
-// Component for parsing YouTube URLs in markdown
-export const YouTubeLinkParser: React.FC<{ href: string; children: React.ReactNode }> = ({ href, children }) => {
-  const videoId = extractYouTubeId(href);
-  
-  // If it's a YouTube URL, render the embed instead of a link
-  if (videoId) {
-    return <YouTubeEmbed videoId={videoId} title={typeof children === 'string' ? children : undefined} />;
-  }
-
-  // Otherwise, render as a normal link
-  return (
-    <a 
-      href={href} 
-      target="_blank" 
-      rel="noopener noreferrer"
-      className="text-ods-accent hover:text-ods-accent-hover transition-colors duration-200"
-    >
-      {children}
-    </a>
-  );
-};