update

index.html

@@ -14,13 +14,14 @@
 		<header>
 			<h1>V-JEPA 2: Streaming Video Classification</h1>
 			<nav class="links">
-				<a href="https://huggingface.co/collections/facebook/v-jepa-2-6841bad8413014e185b497a6" target="_blank">🎥
+				<a href="https://huggingface.co/collections/facebook/v-jepa-2-6841bad8413014e185b497a6"
+					target="_blank">🎥
 					Collection</a>
 				<a href="https://github.com/facebookresearch/vjepa2" target="_blank">📚 GitHub</a>
 				<a href="https://huggingface.co/papers/2506.09985" target="_blank">📄 Paper</a>
 			</nav>
 		</header>
-		
+
 		<section class="description">
 			<h4>🎥 Video Classification</h4>
 			<p>This demo showcases a specialized version of V-JEPA 2, fine-tuned for real-time video action recognition!
@@ -33,10 +34,12 @@
 		<section class="demo">
 			<h2>Recorded Demo</h2>
 			<div class="video-container">
-				<!-- Video will be embedded here -->
-				<div class="video-placeholder">
-					<p>Video demo will be displayed here</p>
-				</div>
+				<video controls>
+					<source
+						src="https://huggingface.co/spaces/qubvel-hf/vjepa2-streaming-video-classification/resolve/main/misc/vjepa2-fastrtc-demo.mp4"
+						type="video/mp4">
+					Your browser does not support the video tag.
+				</video>
 			</div>
 		</section>
 

style.css

@@ -74,14 +74,11 @@ h3 {
 	margin-bottom: 1rem;
 }
 
-.video-placeholder {
+.video-container video {
 	width: 100%;
 	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: var(--secondary-color);
-	font-size: 1.1rem;
+	object-fit: cover;
+	display: block;
 }
 
 .instructions {
@@ -190,4 +187,8 @@ a:hover {
 		align-items: center;
 		gap: 1rem;
 	}
+}
+
+.video-placeholder {
+	display: none;
 }