diff --git a/index.html b/index.html index d00855e..8c74e31 100644 --- a/index.html +++ b/index.html @@ -31,13 +31,28 @@ .video-wrapper { flex: 1; min-width: 0; } + .video-wrapper { + overflow: hidden; + border-radius: 12px; + } + .video-wrapper video { width: 100%; height: auto; + display: block; border-radius: 12px; box-shadow: 0 4px 40px rgba(0,0,0,0.6); } + @keyframes spin360 { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } + } + + .video-wrapper video.spin { + animation: spin360 0.5s ease-out; + } + .button-sidebar { display: flex; flex-direction: column; @@ -100,6 +115,17 @@ v.addEventListener('contextmenu', e => e.preventDefault()); v.addEventListener('pause', () => v.play()); setInterval(() => { if (v.paused) v.play(); }, 200); + + let lastTime = 0; + v.addEventListener('timeupdate', () => { + const t = v.currentTime; + if (lastTime > 0.5 && t < 0.1) { + v.classList.remove('spin'); + void v.offsetWidth; + v.classList.add('spin'); + } + lastTime = t; + }); })();