From 3f79490d4dbc51b12198a4c09fe32e8b1b189d61 Mon Sep 17 00:00:00 2001
From: AskIt <christomatt.89@gmail.com>
Date: Mon, 26 Jan 2026 02:52:28 +0100
Subject: [PATCH] style(video): Refactor blurred video container layout and
 improve sync handling

- Remove max-height constraint from blurred-video-container for flexible sizing
- Simplify background video positioning from centered transform to full coverage
- Add scale transform to background video for better blur effect coverage
- Update background video to use full width/height instead of 110% dimensions
- Add opacity transition state for background video loading
- Improve event listener cleanup with named handler functions
- Add error handling for background video playback with catch fallback
- Add loadeddata event listener to track video loading state
- Override post-media-item video background for transparent blurred container
- Enhance video synchronization reliability between main and background layers
---
 src/app/globals.css             | 16 ++++++++++------
 src/components/BlurredVideo.tsx | 18 ++++++++++++++----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 5abdf4f..9444012 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -360,7 +360,6 @@ a.btn-primary:visited {
 .blurred-video-container {
   position: relative;
   width: 100%;
-  max-height: 360px;
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -370,14 +369,14 @@ a.btn-primary:visited {
 
 .blurred-video-bg {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 110%;
-  height: 110%;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
   filter: blur(20px) brightness(0.6);
   pointer-events: none;
+  transform: scale(1.1);
 }
 
 .blurred-video-main {
@@ -389,6 +388,11 @@ a.btn-primary:visited {
   z-index: 1;
 }
 
+/* Override post-media-item video styles for blurred container */
+.post-media-item .blurred-video-container video {
+  background: transparent;
+}
+
 .video-embed-container {
   position: relative;
   padding-bottom: 56.25%;
diff --git a/src/components/BlurredVideo.tsx b/src/components/BlurredVideo.tsx
index 0d2f8eb..be7f45c 100644
--- a/src/components/BlurredVideo.tsx
+++ b/src/components/BlurredVideo.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useState } from 'react';
 
 interface BlurredVideoProps {
     src: string;
@@ -11,25 +11,34 @@ export default function BlurredVideo({ src, onClick }: BlurredVideoProps) {
     const containerRef = useRef<HTMLDivElement>(null);
     const mainVideoRef = useRef<HTMLVideoElement>(null);
     const bgVideoRef = useRef<HTMLVideoElement>(null);
+    const [isLoaded, setIsLoaded] = useState(false);
 
     useEffect(() => {
-        // Sync playback between main and background videos
         const mainVideo = mainVideoRef.current;
         const bgVideo = bgVideoRef.current;
         
         if (mainVideo && bgVideo) {
+            // Sync playback between main and background videos
             const syncTime = () => {
                 if (Math.abs(mainVideo.currentTime - bgVideo.currentTime) > 0.1) {
                     bgVideo.currentTime = mainVideo.currentTime;
                 }
             };
             
+            const handlePlay = () => bgVideo.play().catch(() => {});
+            const handlePause = () => bgVideo.pause();
+            const handleLoaded = () => setIsLoaded(true);
+            
             mainVideo.addEventListener('seeked', syncTime);
-            mainVideo.addEventListener('play', () => bgVideo.play());
-            mainVideo.addEventListener('pause', () => bgVideo.pause());
+            mainVideo.addEventListener('play', handlePlay);
+            mainVideo.addEventListener('pause', handlePause);
+            mainVideo.addEventListener('loadeddata', handleLoaded);
             
             return () => {
                 mainVideo.removeEventListener('seeked', syncTime);
+                mainVideo.removeEventListener('play', handlePlay);
+                mainVideo.removeEventListener('pause', handlePause);
+                mainVideo.removeEventListener('loadeddata', handleLoaded);
             };
         }
     }, []);
@@ -47,6 +56,7 @@ export default function BlurredVideo({ src, onClick }: BlurredVideoProps) {
                 preload="metadata"
                 className="blurred-video-bg"
                 aria-hidden="true"
+                style={{ opacity: isLoaded ? 1 : 0 }}
             />
             {/* Main video */}
             <video