diff --git a/player/html/index.html b/player/html/index.html
index ecd371b..05cdcde 100644
--- a/player/html/index.html
+++ b/player/html/index.html
@@ -17,6 +17,29 @@
         height: 100%;
         font-family: Menlo, sans-serif;
     }
+    #click-to-play {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+
+        background: #000000;
+        color: white;
+        display: flex;
+        justify-content: center;
+        z-index: 10;
+        cursor: pointer;
+    }
+    #click-to-play .text {
+        font-size: 16px;
+        width: 80%;
+        margin: auto;
+        text-align: center;
+    }
+
 
     /* Full page container */
     .page {
@@ -55,6 +78,9 @@
         cursor: pointer;
         font-size: 18px;
         transition: background 0.2s ease, transform 0.2s ease;
+        &.current {
+            background: #909090;
+        }
     }
 
     .box:hover {
@@ -106,6 +132,7 @@
 
 <body>
 <script>
+    const random = +new Date
 
     const sub_handlers = {};
     var playlist = [
@@ -160,7 +187,7 @@
         nextVideo = currentVideo
         currentVideo = next
         sub_handlers[nextVideo.id]?.destroy()
-        fetch(nextVideo.src.replace(/.mp4/, '.ass')).then(async (res) => {
+        fetch(nextVideo.src.replace(/.mp4/, '.ass') + '?' +random ).then(async (res) => {
             const content = await res.text()
             const ass = new ASS(content, nextVideo, {
                 container: subtitles,
@@ -203,6 +230,86 @@
     ];
 
 
+    function bindFullscreen() {
+        window.addEventListener('keydown', event => {
+            console.log('keydown')
+            event.stopPropagation()
+        });
+        window.addEventListener('mousedown', event => {
+            console.log('mousedown')
+            toggleFullscreen()
+            event.preventDefault()
+            event.stopPropagation()
+        });
+        window.addEventListener('touchstart', event => {
+            event.preventDefault()
+            event.stopPropagation()
+        });
+    }
+
+    function toggleFullscreen() {
+        var body = document.querySelector('body')
+        if (!(document.fullscreenElement === null || document.webkitFullscreenElement === null)) {
+
+            if (document.fullscreenElement) {
+                document.exitFullscreen()
+            }
+            if (document.webkitFullscreenElement) {
+                document.webkitExitFullscreen()
+            }
+        } else {
+            console.log('enter fullscreen?')
+            if (body.webkitRequestFullscreen) {
+                body.webkitRequestFullscreen({navigationUI: 'hide'})
+            } else {
+                body.requestFullscreen({navigationUI: 'hide'}).catch(err => {
+                    console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
+                });
+            }
+        }
+    }
+
+
+
+
+    function play() {
+        let blocked = false, loading
+        document.querySelectorAll("video,audio").forEach(async (media) => {
+            if (blocked) { return }
+            return media.play().then(() => {
+                if (media.classList.contains('next')) {
+                    media.pause()
+                }
+            }).catch(error => {
+                if (blocked) {
+                    return
+                }
+                blocked = true
+                loading = document.createElement('div')
+                loading.id = 'click-to-play'
+                loading.innerHTML = '<div class="text"><h1>P for Power</h1><p>click to start</p></div>'
+                document.body.appendChild(loading)
+                function removeBehaviorsRestrictions() {
+                    loading.remove()
+                    window.removeEventListener('keydown', removeBehaviorsRestrictions);
+                    window.removeEventListener('mousedown', removeBehaviorsRestrictions);
+                    window.removeEventListener('touchstart', removeBehaviorsRestrictions);
+                    blocked = false
+                    play()
+                    toggleFullscreen()
+                }
+                window.addEventListener('keydown', removeBehaviorsRestrictions);
+                window.addEventListener('mousedown', removeBehaviorsRestrictions);
+                window.addEventListener('touchstart', removeBehaviorsRestrictions);
+            })
+        })
+    }
+    function pause() {
+        document.createElementAll("video,audio").forEach(media => {
+            media.paused = true
+        })
+    }
+
     function render() {
         name = document.location.hash.slice(1)
         console.log('on load', name)
@@ -211,7 +318,6 @@
             name = parts[0]
             current = parseInt(parts[1]) - 1
         }
-        console.log('on load', name, parts, current)
         var body = document.querySelector('body')
         body.innerHTML = ``
         var stage = document.createElement("div")
@@ -231,7 +337,7 @@
         const titleEl = overlay.querySelector("#title");
         for (let i = 1; i <= 30; i++) {
             const box = document.createElement("div");
-            box.className = "box";
+            box.className = "box box" + i;
             box.textContent = i;
 
             box.addEventListener("mouseenter", () => {
@@ -246,7 +352,7 @@
                 document.querySelector(".page").style.display = ""
                 current = parseInt(box.textContent) - 1
                 nextVideo.src = prefix + name + playlist[current]
-                fetch(nextVideo.src.replace(/.mp4/, '.ass')).then(async (res) => {
+                fetch(nextVideo.src.replace(/.mp4/, '.ass') + '?' +random).then(async (res) => {
                     const content = await res.text()
                     const ass = new ASS(content, nextVideo, {
                         container: subtitles,
@@ -289,7 +395,6 @@
         audio2.controls = false
         audio2.volume = 1
         audio2.loop = true
-        audio2.autoplay = true
         audio2.classList.add("forest")
         body.appendChild(audio2)
 
@@ -298,7 +403,6 @@
         audio3.controls = false
         audio3.volume = 1
         audio3.loop = true
-        audio3.autoplay = true
         audio3.currentTime = Math.random() * 60
         audio3.classList.add("music")
         body.appendChild(audio3)
@@ -308,17 +412,19 @@
             media.addEventListener('pause', sync)
             media.addEventListener('click', () => {
                 document.querySelector(".page").style.display = "flex"
+                document.querySelectorAll('.box').forEach(box => { box.classList.remove('current') })
+                document.querySelector('.box' + current).classList.add('current')
             })
         })
-        fetch(video1.src.replace(/.mp4/, '.ass')).then(async (res) => {
+        fetch(video1.src.replace(/.mp4/, '.ass') + '?' +random).then(async (res) => {
             const content = await res.text()
             const ass = new ASS(content, video1, {
                 container: subtitles,
             });
             sub_handlers[video1.id] = ass
             sub_handlers[video1.id].show()
-            video1.play()
-            fetch(video2.src.replace(/.mp4/, '.ass')).then(async (res) => {
+            play()
+            fetch(video2.src.replace(/.mp4/, '.ass')+ '?' +random).then(async (res) => {
                 const content = await res.text()
                 const ass = new ASS(content, video2, {
                     container: subtitles,
