diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 0c1aef4..75454eb 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -1,3 +1,4 @@
+import Hls from "hls.js";
 import { useState, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useRoute, useLocation } from "wouter";
@@ -655,6 +656,26 @@ export default function VideoPage() {
                   onLoad={handleVideoPlay}
                   title={currentVideo.title}
                 />
+              ) : currentVideo.videoUrl ? (
+                <video
+                  ref={(el) => {
+                    if (!el || el.dataset.hlsAttached === currentVideo.id) return;
+                    el.dataset.hlsAttached = currentVideo.id;
+                    const src = currentVideo.videoUrl;
+                    if (Hls.isSupported() && src.endsWith('.m3u8')) {
+                      const hls = new Hls();
+                      hls.loadSource(src);
+                      hls.attachMedia(el);
+                    } else {
+                      el.src = src;
+                    }
+                  }}
+                  controls
+                  playsInline
+                  className="absolute inset-0 w-full h-full bg-black"
+                  poster={currentVideo.customThumbnailUrl || currentVideo.thumbnailUrl}
+                  onPlay={handleVideoPlay}
+                />
               ) : (
                 <div className="absolute inset-0 flex items-center justify-center text-white">
                   <p>Video nicht verfügbar</p>