feat: lazy load youtube

website/src/components/VideoContent.jsx

@@ -1,29 +1,98 @@
 // biome-ignore lint/correctness/noUnusedImports: Needs this for React to work
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import Admonition from '@theme/Admonition';
+import styles from './VideoContent.module.css';
+
+// Extract YouTube video ID from various URL formats
+const extractVideoId = (url) => {
+    const regex =
+        /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/;
+    const match = url.match(regex);
+    return match ? match[1] : null;
+};
+
+// Lazy video component that shows thumbnail until clicked
+const LazyVideo = ({ url, title = 'YouTube video player' }) => {
+    const [isLoaded, setIsLoaded] = useState(false);
+    const videoId = extractVideoId(url);
+
+    const handleLoad = useCallback(() => {
+        setIsLoaded(true);
+    }, []);
+
+    if (!videoId) {
+        return (
+            <Admonition type='warning'>Invalid YouTube URL: {url}</Admonition>
+        );
+    }
+
+    if (!isLoaded) {
+        return (
+            <div
+                className={styles.videoThumbnail}
+                onClick={handleLoad}
+                onKeyDown={(e) => e.key === 'Enter' && handleLoad()}
+                role='button'
+                tabIndex={0}
+                style={{
+                    backgroundImage: `url(https://img.youtube.com/vi/${videoId}/maxresdefault.jpg)`,
+                }}
+                aria-label={`Load ${title}`}
+            >
+                {/* Play button overlay */}
+                <div className={styles.playButton}>
+                    <svg
+                        width='32'
+                        height='32'
+                        viewBox='0 0 24 24'
+                        fill='white'
+                        style={{ marginLeft: '2px' }}
+                    >
+                        <path d='M8 5v14l11-7z' />
+                    </svg>
+                </div>
+
+                {/* Loading hint */}
+                <div className={styles.loadingHint}>Click to load video</div>
+            </div>
+        );
+    }
 
-const Component = ({ videoUrls }) => {
     return (
-        <article className='unleash-video-container'>
-            {videoUrls ? (
-                videoUrls.map((url) => (
-                    <iframe
-                        key={url}
-                        width='100%'
-                        height='auto'
-                        src={url}
-                        title='YouTube video player'
-                        allowFullScreen
-                    />
-                ))
-            ) : (
-                <Admonition type='danger'>
-                    You need to provide YouTube video URLs for this component to
-                    work properly.
-                </Admonition>
-            )}
+        <iframe
+            className={styles.loadedVideo}
+            width='100%'
+            height='315'
+            src={`${url}${url.includes('?') ? '&' : '?'}autoplay=1`}
+            title={title}
+            allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+            allowFullScreen
+            loading='lazy'
+        />
+    );
+};
+
+const VideoContent = ({ videoUrls }) => {
+    if (!videoUrls || videoUrls.length === 0) {
+        return (
+            <Admonition type='danger'>
+                You need to provide YouTube video URLs for this component to
+                work properly.
+            </Admonition>
+        );
+    }
+
+    return (
+        <article className={`unleash-video-container ${styles.videoContainer}`}>
+            {videoUrls.map((url, index) => (
+                <LazyVideo
+                    key={url}
+                    url={url}
+                    title={`YouTube video player ${index + 1}`}
+                />
+            ))}
         </article>
     );
 };
 
-export default Component;
+export default VideoContent;

website/src/components/VideoContent.module.css

@@ -0,0 +1,108 @@
+/* Video thumbnail hover effects */
+.videoThumbnail {
+    position: relative;
+    width: 100%;
+    padding-bottom: 56.25%; /* 16:9 aspect ratio */
+    background-size: cover;
+    background-position: center;
+    cursor: pointer;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid var(--ifm-color-emphasis-200);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.videoThumbnail:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.videoThumbnail:hover .playButton {
+    transform: translate(-50%, -50%) scale(1.1);
+    background-color: var(--ifm-color-primary);
+}
+
+.playButton {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80px;
+    height: 80px;
+    background-color: rgba(0, 0, 0, 0.8);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    border: 3px solid rgba(255, 255, 255, 0.9);
+}
+
+.loadingHint {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    backdrop-filter: blur(4px);
+}
+
+.videoContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    margin: 1rem 0;
+}
+
+.loadedVideo {
+    border: none;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Dark mode adjustments */
+[data-theme='dark'] .videoThumbnail {
+    border-color: var(--ifm-color-emphasis-300);
+}
+
+[data-theme='dark'] .videoThumbnail:hover {
+    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .playButton {
+        width: 60px;
+        height: 60px;
+    }
+    
+    .videoContainer {
+        gap: 1rem;
+    }
+}
+
+/* Loading state */
+.videoThumbnail:focus-visible {
+    outline: 2px solid var(--ifm-color-primary);
+    outline-offset: 2px;
+}
+
+/* Animation for smooth loading */
+.loadedVideo {
+    animation: fadeInScale 0.3s ease-out;
+}
+
+@keyframes fadeInScale {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}