Update index.html

index.html

@@ -61,14 +61,17 @@
         .tab-menu {
             display: flex;
             justify-content: center;
-            gap: 20px;
+            flex-wrap: wrap;
+            gap: 10px;
             margin-bottom: 20px;
-            padding: 10px;
+            padding: 15px;
             background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
             border-radius: 10px;
         }
         .tab-button {
-            padding: 10px 30px;
+            padding: 8px 16px;
+            font-size: 14px;
+            min-width: 120px;
             border: none;
             border-radius: 5px;
             background: #333;
@@ -185,10 +188,14 @@
 
     <div class="container">
         <div class="tab-menu">
-            <button class="tab-button active" data-tab="1">BEST</button>
-            <button class="tab-button" data-tab="2">Popularity</button>
-            <button class="tab-button" data-tab="3">Hot</button>
-            <button class="tab-button" data-tab="4">NEW</button>
+            <button class="tab-button active" data-tab="1">🏆 BEST</button>
+            <button class="tab-button" data-tab="2">🔥 HOT</button>
+            <button class="tab-button" data-tab="3">⭐ Popular</button>
+            <button class="tab-button" data-tab="4">🆕 NEW</button>
+            <button class="tab-button" data-tab="5">💫 Trending</button>
+            <button class="tab-button" data-tab="6">👑 Premium</button>
+            <button class="tab-button" data-tab="7">❤️ Most Liked</button>
+            <button class="tab-button" data-tab="8">🎯 Featured</button>
         </div>
 
         <div class="selected-content">
@@ -209,199 +216,225 @@
 
     <script>
 const videoFiles = [
-    { file: 'chicken.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'ddd.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'm6.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'i0.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'i1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'OP5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'OP6.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qq13.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'zawq1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qq14.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qq12.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'i2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qqq14.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'BB1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'BB2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qqq1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qqq2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qqqq.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'plane.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'ewq1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmpaqldmcah.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'x1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'x2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'x3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'x4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'V1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'V2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'V3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'V4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qq43.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qq44.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qw1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'i5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'i6.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'i7.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'i8.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qqq10.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'i9.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: '13.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qq21.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qq22.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qq23.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmp72ufgzpa.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmpeodtm_jl.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmpi2bkoc60.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'xz1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'xz2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'xz3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'xz4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'xz5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'xz6.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'xz7.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'xz8.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'xz9.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'xz10.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'xz11.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'xz12.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'xz13.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'xz14.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'xz15.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 't1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 't2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 't3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 't4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'd1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'd2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'd4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'd5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'd6.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'OP1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'OP2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'OP3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'OP4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tr1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tr2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tr3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tr4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tr5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tr6.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tr7.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tr8.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tr9.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'z1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'z2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'z3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'aq1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'aq2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'i3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmpss5nprt_.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'watermarked_output (10).mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qq1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qq2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qq3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qq4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qq41.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qq42.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qaw1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qaw2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qaw3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: '11.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: '12.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qq11.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmp1y2bgrly.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmp22o82oge.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmp43xj9wgj.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmp59a06_s4.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmp6tomynny.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmp77sxlo_s.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmp8tehlk6n.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmp95_p0et8.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmp9l96xmk5.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmpa1kmfjzl.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmpf03w8duw.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmpga24owoo.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmph843b62h.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmpi97a5zy8.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmpinq30vk2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmpnuljiasj.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmpqh0z4uts.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmps_zu8c60.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmpvdq4uchy.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmpx2ketgav.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmpx75_3o81.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'tmpy2_6d7qo.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qw2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qw3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qw4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qw5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'watermarked_output (4).mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'aq3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'aq4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'aq5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qqq11.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qqq12.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'qqq13.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'i4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'z4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'm2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'm3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'z6.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'm1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'z8.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'm4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'm5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
-    { file: 'watermarked_output (9).mp4', tab: Math.floor(Math.random() * 4) + 1 }
+    { file: 'chicken.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'ddd.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'm6.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'i0.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'i1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'OP5.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'OP6.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qq13.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'zawq1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qq14.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qq12.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'i2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qqq14.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'BB1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'BB2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qqq1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qqq2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qqqq.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'plane.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'ewq1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmpaqldmcah.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'x1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'x2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'x3.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'x4.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'V1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'V2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'V3.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'V4.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qq43.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qq44.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qw1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'i5.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'i6.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'i7.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'i8.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qqq10.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'i9.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: '13.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qq21.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qq22.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qq23.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmp72ufgzpa.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmpeodtm_jl.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmpi2bkoc60.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'xz1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'xz2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'xz3.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'xz4.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'xz5.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'xz6.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'xz7.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'xz8.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'xz9.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'xz10.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'xz11.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'xz12.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'xz13.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'xz14.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'xz15.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 't1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 't2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 't3.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 't4.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'd1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'd2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'd4.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'd5.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'd6.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'OP1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'OP2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'OP3.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'OP4.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tr1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tr2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tr3.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tr4.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tr5.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tr6.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tr7.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tr8.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tr9.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'z1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'z2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'z3.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'aq1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'aq2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'i3.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmpss5nprt_.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'watermarked_output (10).mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qq1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qq2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qq3.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qq4.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qq41.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qq42.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qaw1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qaw2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qaw3.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: '11.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: '12.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qq11.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmp1y2bgrly.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmp22o82oge.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmp43xj9wgj.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmp59a06_s4.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmp6tomynny.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmp77sxlo_s.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmp8tehlk6n.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmp95_p0et8.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmp9l96xmk5.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmpa1kmfjzl.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmpf03w8duw.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmpga24owoo.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmph843b62h.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmpi97a5zy8.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmpinq30vk2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmpnuljiasj.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmpqh0z4uts.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmps_zu8c60.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmpvdq4uchy.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmpx2ketgav.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmpx75_3o81.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'tmpy2_6d7qo.output.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qw2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qw3.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qw4.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qw5.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'watermarked_output (4).mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'aq3.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'aq4.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'aq5.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qqq11.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qqq12.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'qqq13.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'i4.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'z4.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'm2.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'm3.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'z6.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'm1.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'z8.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'm4.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'm5.mp4', tab: Math.floor(Math.random() * 8) + 1 },
+    { file: 'watermarked_output (9).mp4', tab: Math.floor(Math.random() * 8) + 1 }
 ];
         function initializeGallery() {
             const gallery = document.getElementById('video-gallery');
             const selectedThumb = document.getElementById('selected-thumb');
             const selectedVideo = document.getElementById('selected-video');
-            videoFiles.forEach((videoData) => {
+            const initialLoadCount = 16;
+            let loadedVideos = 0;
+            videoFiles.forEach((videoData, index) => {
                 const thumbnail = document.createElement('div');
                 thumbnail.className = 'thumbnail';
                 thumbnail.dataset.tab = videoData.tab;
                 
-                const thumbVideo = document.createElement('video');
-                thumbVideo.src = videoData.file;
-                thumbVideo.playsinline = true;
-                thumbVideo.muted = true;
-                thumbVideo.preload = 'metadata';
-                
-                thumbVideo.addEventListener('loadeddata', () => {
-                    thumbVideo.currentTime = 0;
-                });
-                thumbnail.appendChild(thumbVideo);
-                
-                thumbnail.addEventListener('click', () => {
-                    selectedThumb.src = videoData.file;
-                    selectedVideo.src = videoData.file;
-                    selectedThumb.currentTime = 0;
-                    selectedVideo.play();
-                });
+                if (index < initialLoadCount) {
+                    createVideoElement(thumbnail, videoData, true);
+                    loadedVideos++;
+                } else {
+                    thumbnail.dataset.videoSrc = videoData.file;
+                    thumbnail.style.backgroundColor = '#1a1a1a';
+                }
                 gallery.appendChild(thumbnail);
             });
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const thumbnail = entry.target;
+                        if (thumbnail.dataset.videoSrc) {
+                            createVideoElement(thumbnail, { file: thumbnail.dataset.videoSrc }, false);
+                            delete thumbnail.dataset.videoSrc;
+                        }
+                    }
+                });
+            }, {
+                root: null,
+                rootMargin: '50px',
+                threshold: 0.1
+            });
+            document.querySelectorAll('.thumbnail').forEach(thumb => {
+                observer.observe(thumb);
+            });
             if (videoFiles.length > 0) {
                 selectedThumb.src = videoFiles[0].file;
                 selectedVideo.src = videoFiles[0].file;
                 selectedThumb.currentTime = 0;
             }
-            // 초기 탭 표시
-            showTabContent('1');
         }
-        function showTabContent(tabNumber) {
-            const thumbnails = document.querySelectorAll('.thumbnail');
-            thumbnails.forEach(thumb => {
-                if (thumb.dataset.tab === tabNumber) {
-                    thumb.style.display = 'block';
-                } else {
-                    thumb.style.display = 'none';
+        function createVideoElement(thumbnail, videoData, autoload) {
+            const thumbVideo = document.createElement('video');
+            thumbVideo.playsinline = true;
+            thumbVideo.muted = true;
+            thumbVideo.preload = autoload ? 'metadata' : 'none';
+            thumbVideo.addEventListener('loadedmetadata', () => {
+                thumbVideo.currentTime = 0;
+            });
+            thumbnail.addEventListener('click', () => {
+                const selectedThumb = document.getElementById('selected-thumb');
+                const selectedVideo = document.getElementById('selected-video');
+                
+                selectedThumb.src = videoData.file;
+                selectedVideo.src = videoData.file;
+                selectedThumb.currentTime = 0;
+                selectedVideo.play();
+            });
+            thumbnail.addEventListener('mouseenter', () => {
+                if (!thumbVideo.src) {
+                    thumbVideo.src = videoData.file;
                 }
+                thumbVideo.play();
             });
+            thumbnail.addEventListener('mouseleave', () => {
+                thumbVideo.pause();
+                thumbVideo.currentTime = 0;
+            });
+            thumbnail.appendChild(thumbVideo);
         }
-        // 탭 버튼 이벤트 리스너
         document.querySelectorAll('.tab-button').forEach(button => {
             button.addEventListener('click', () => {
                 document.querySelectorAll('.tab-button').forEach(btn => 
@@ -410,8 +443,17 @@ const videoFiles = [
                 showTabContent(button.dataset.tab);
             });
         });
+        function showTabContent(tabNumber) {
+            const thumbnails = document.querySelectorAll('.thumbnail');
+            thumbnails.forEach(thumb => {
+                if (thumb.dataset.tab === tabNumber) {
+                    thumb.style.display = 'block';
+                } else {
+                    thumb.style.display = 'none';
+                }
+            });
+        }
         initializeGallery();
     </script>
 </body>
-</html>
-
+</html>