From e0274782a5236a63b9f3f1fa0b4eec1ac695c3f3 Mon Sep 17 00:00:00 2001
From: FredrikOseberg <fredrik.no@gmail.com>
Date: Thu, 14 Aug 2025 14:47:35 +0200
Subject: [PATCH] fix: responsible video

---
 website/src/components/VideoContent.jsx       | 23 +++++++-------
 .../src/components/VideoContent.module.css    | 31 ++++++++++++++++---
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/website/src/components/VideoContent.jsx b/website/src/components/VideoContent.jsx
index 30fbfb2d3d..6b3054dc1b 100644
--- a/website/src/components/VideoContent.jsx
+++ b/website/src/components/VideoContent.jsx
@@ -35,11 +35,12 @@ const LazyVideo = ({ url, title = 'YouTube video player' }) => {
                 role='button'
                 tabIndex={0}
                 aria-label={`Load ${title}`}
-                style={{ width: '414px', height: '232px' }}
             >
                 {/* Play button overlay */}
                 <img
+                    className={styles.thumbnailImage}
                     src={`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`}
+                    alt={`${title} thumbnail`}
                     fetchPriority='high'
                 />
                 <div className={styles.playButton}>
@@ -61,16 +62,16 @@ const LazyVideo = ({ url, title = 'YouTube video player' }) => {
     }
 
     return (
-        <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'
-        />
+        <div className={styles.videoWrapper}>
+            <iframe
+                className={styles.loadedVideo}
+                src={`${url}${url.includes('?') ? '&' : '?'}autoplay=1`}
+                title={title}
+                allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+                allowFullScreen
+                loading='lazy'
+            />
+        </div>
     );
 };
 
diff --git a/website/src/components/VideoContent.module.css b/website/src/components/VideoContent.module.css
index c69dd4733d..8987bad129 100644
--- a/website/src/components/VideoContent.module.css
+++ b/website/src/components/VideoContent.module.css
@@ -3,8 +3,6 @@
     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;
@@ -12,6 +10,15 @@
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
+.thumbnailImage {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
 .videoThumbnail:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
@@ -56,12 +63,26 @@
     flex-direction: column;
     gap: 1.5rem;
     margin: 1rem 0;
+    width: 100%;
+    max-width: 100%;
+}
+
+.videoWrapper {
+    position: relative;
+    width: 100%;
+    padding-bottom: 56.25%; /* 16:9 aspect ratio */
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .loadedVideo {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     border: none;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 /* Dark mode adjustments */
@@ -92,7 +113,7 @@
 }
 
 /* Animation for smooth loading */
-.loadedVideo {
+.videoWrapper {
     animation: fadeInScale 0.3s ease-out;
 }