diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index a088bb0..2eaa0ec 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -60,6 +60,7 @@ export default function VideoPage() {
   const [searchQuery, setSearchQuery] = useState("");
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isVideoLoading, setIsVideoLoading] = useState(true);
 
   // Fetch current video
   const { data: currentVideo, isLoading: videoLoading } = useQuery<Video>({
@@ -102,6 +103,11 @@ export default function VideoPage() {
   };
   
   
+  // Reset video loading state when video changes
+  useEffect(() => {
+    setIsVideoLoading(true);
+  }, [videoId]);
+
   // Update page meta tags for social sharing
   useEffect(() => {
     if (currentVideo) {
@@ -179,6 +185,7 @@ export default function VideoPage() {
   };
 
   const handleVideoPlay = async () => {
+    setIsVideoLoading(false);
     if (currentVideo) {
       try {
         await apiRequest("POST", `/api/videos/${currentVideo.id}/view`);
@@ -433,15 +440,23 @@ export default function VideoPage() {
                 </>
               )}
               {currentVideo.videoUrlIframe ? (
-                <iframe
-                  src={`${currentVideo.videoUrlIframe}${currentVideo.videoUrlIframe.includes('?') ? '&' : '?'}autoplay=1`}
-                  className="absolute inset-0 w-full h-full"
-                  frameBorder="0"
-                  allowFullScreen
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  onLoad={handleVideoPlay}
-                  title={currentVideo.title}
-                />
+                <>
+                  {/* Loading overlay with smooth fade out */}
+                  {isVideoLoading && (
+                    <div className="absolute inset-0 bg-black flex items-center justify-center z-10 transition-opacity duration-300">
+                      <div className="text-white text-lg">Lade Video...</div>
+                    </div>
+                  )}
+                  <iframe
+                    src={`${currentVideo.videoUrlIframe}${currentVideo.videoUrlIframe.includes('?') ? '&' : '?'}autoplay=1`}
+                    className="absolute inset-0 w-full h-full"
+                    frameBorder="0"
+                    allowFullScreen
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    onLoad={handleVideoPlay}
+                    title={currentVideo.title}
+                  />
+                </>
               ) : (
                 <div className="absolute inset-0 flex items-center justify-center text-white">
                   <p>Video nicht verfügbar</p>