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(null); const mainVideoRef = useRef(null); const bgVideoRef = useRef(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 */}