Update index.html

index.html

@@ -140,42 +140,45 @@
             height: 100%;
             object-fit: contain;
         }
-        .gallery {
-            display: grid;
-            grid-template-columns: repeat(8, 1fr);
-            gap: 15px;
-            padding: 20px;
-            background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
-            border-radius: 15px;
-        }
-        .thumbnail {
-            position: relative;
-            padding-top: 56.25%;
-            cursor: pointer;
-            overflow: hidden;
-            background-color: #000;
-            border: 3px solid #333;
-            border-radius: 8px;
-            box-shadow: 
-                0 5px 15px rgba(0, 0, 0, 0.5),
-                0 0 0 1px rgba(255, 255, 255, 0.1);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-        }
+ 
+
+.thumbnail {
+    position: relative;
+    padding-top: 56.25%;
+    cursor: pointer;
+    overflow: hidden;
+    background-color: #000;
+    border: 3px solid #333;
+    border-radius: 8px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+    transition: transform 0.3s ease;
+}
+
+.thumbnail video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 15px;
+    padding: 20px;
+    background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
+    border-radius: 15px;
+}
+
         .thumbnail:hover {
             transform: translateY(-5px) scale(1.02);
             box-shadow: 
                 0 8px 20px rgba(0, 0, 0, 0.8),
                 0 0 0 1px rgba(255, 255, 255, 0.2);
         }
-        .thumbnail video {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            transition: transform 0.3s ease;
-        }
+
         .thumbnail:hover video {
             transform: scale(1.1);
         }
@@ -400,54 +403,95 @@ const videoFiles = [
                 selectedThumb.currentTime = 0;
             }
         }
-        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 => 
-                    btn.classList.remove('active'));
-                button.classList.add('active');
-                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';
-                }
-            });
+function createVideoElement(thumbnail, videoData, autoload) {
+    const thumbVideo = document.createElement('video');
+    thumbVideo.src = videoData.file;  // 직접 src 설정
+    thumbVideo.playsinline = true;
+    thumbVideo.muted = true;
+    thumbVideo.loop = true;  // 반복 재생 추가
+    thumbVideo.preload = 'metadata';
+    
+    // 비디오 로드 완료 후 처리
+    thumbVideo.addEventListener('loadeddata', () => {
+        thumbVideo.currentTime = 0;
+    });
+
+    // 에러 처리 추가
+    thumbVideo.addEventListener('error', (e) => {
+        console.error('Video loading error:', e);
+        thumbnail.style.backgroundColor = '#333';
+    });
+
+    thumbnail.addEventListener('mouseenter', () => {
+        thumbVideo.play().catch(e => console.log('Playback failed:', e));
+    });
+
+    thumbnail.addEventListener('mouseleave', () => {
+        thumbVideo.pause();
+        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;
+        selectedVideo.play().catch(e => console.log('Playback failed:', e));
+    });
+
+    thumbnail.appendChild(thumbVideo);
+}
+
+function initializeGallery() {
+    const gallery = document.getElementById('video-gallery');
+    const selectedThumb = document.getElementById('selected-thumb');
+    const selectedVideo = document.getElementById('selected-video');
+
+    // 초기 비디오 설정
+    if (videoFiles.length > 0) {
+        selectedThumb.src = videoFiles[0].file;
+        selectedVideo.src = videoFiles[0].file;
+    }
+
+    // 모든 비디오 썸네일 생성
+    videoFiles.forEach((videoData) => {
+        const thumbnail = document.createElement('div');
+        thumbnail.className = 'thumbnail';
+        thumbnail.dataset.tab = videoData.tab;
+        
+        createVideoElement(thumbnail, videoData, true);
+        gallery.appendChild(thumbnail);
+    });
+
+    // 첫 번째 탭 컨텐츠 표시
+    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';
         }
-        initializeGallery();
+    });
+}
+
+// 탭 버튼 이벤트 리스너
+document.querySelectorAll('.tab-button').forEach(button => {
+    button.addEventListener('click', () => {
+        document.querySelectorAll('.tab-button').forEach(btn => 
+            btn.classList.remove('active'));
+        button.classList.add('active');
+        showTabContent(button.dataset.tab);
+    });
+});
+
+// 갤러리 초기화
+initializeGallery();
     </script>
 </body>
 </html>