JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<!-- Glitch Timer Display --> <div id="glitchTimer">00:00:00</div> <!-- Code Input Field --> <input id="codeInput" type="text" placeholder="Enter Code"> <!-- Submit Button --> <<button "Submit">> <<set $enteredCode to (jQuery("#codeInput").val().trim())>> <<if $enteredCode is "squat">> <<goto "squat">> <<elseif $enteredCode is "squat2">> <<goto "squat2">> <<else>> <span style="color:red; font-weight:bold;">Wrong code. Try again.</span> <</if>> <</button>> <!-- Rotation / In-App Browser QR Notice --> <div id="rotateNotice" style="display:none;"> Please open this link in your browser and rotate your phone horizontally.<br><br> <img src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=https://rabbitholestory.com" alt="QR Code to open in browser" style="margin-top:10px;"> </div> <!-- STYLES --> <style> html, body { margin: 0; padding: 0; background: black url("https://i.imgur.com/lU1klHr.png") no-repeat center center fixed; background-size: cover; color: red; overflow: hidden; font-family: system-ui, sans-serif; } #glitchTimer { position: absolute; top: 25%; left: 50%; transform: translateX(-50%); font-size: 10vw; font-weight: bold; text-shadow: 0 0 10px red; z-index: 1000; } #codeInput { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 30vw; padding: 6px; font-size: 2vw; background: black; color: red; border: 3px solid red; font-weight: bold; text-align: center; box-shadow: 0 0 10px red; outline: none; z-index: 1000; } .macro-button { position: absolute; top: 60%; left: 50%; transform: translateX(-50%); padding: 5px 10px; font-size: 2vw; background: red; color: black; border: 3px solid black; font-weight: bold; text-transform: uppercase; box-shadow: 0 0 10px red; animation: pulseGlow 1.2s infinite ease-in-out; z-index: 1000; } @keyframes pulseGlow { 0% { box-shadow: 0 0 8px red; transform: translateX(-50%) scale(1); } 50% { box-shadow: 0 0 20px red; transform: translateX(-50%) scale(1.05); } 100% { box-shadow: 0 0 8px red; transform: translateX(-50%) scale(1); } } #rotateNotice { display: none; position: fixed; top: 30%; left: 50%; transform: translateX(-50%); background: black; color: red; padding: 20px; text-align: center; font-size: 5vw; z-index: 9999; border: 2px solid red; max-width: 90vw; } @media (orientation: portrait) { #rotateNotice { display: block; } #codeInput, .macro-button, #glitchTimer { display: none; } } </style> <!-- GLITCH TIMER + APP DETECTION SCRIPT --> <script> function glitchTimer() { const glitchElement = document.getElementById("glitchTimer"); if (!glitchElement) return; const hours = String(Math.floor(Math.random() * 24)).padStart(2, "0"); const minutes = String(Math.floor(Math.random() * 60)).padStart(2, "0"); const seconds = String(Math.floor(Math.random() * 60)).padStart(2, "0"); glitchElement.innerHTML = `${hours}:${minutes}:${seconds}`; setTimeout(glitchTimer, Math.random() * 500 + 100); } glitchTimer(); // Detect in-app browsers (FB/IG/Messenger) (function() { const ua = navigator.userAgent || navigator.vendor || window.opera; const isInApp = /FBAN|FBAV|Instagram|Messenger/i.test(ua); if (isInApp) { document.getElementById("rotateNotice").style.display = "block"; document.getElementById("glitchTimer").style.display = "none"; document.getElementById("codeInput").style.display = "none"; const button = document.querySelector(".macro-button"); if (button) button.style.display = "none"; } })(); </script>
<<button "Start Video">> <<run $("#playerContainer").fadeIn(); window.videoIndexRH1 = 0; loadYouTubePlayerRH1(window.videoListRH1[window.videoIndexRH1]);>> <</button>> <!-- ✅ Hidden YouTube Player --> <div id="playerContainer" style="display:none; text-align:center;"> <div id="videoWrapper"> <div id="player"></div> </div> </div> <style> #videoWrapper { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ height: 0; overflow: hidden; max-width: 960px; margin: 0 auto; } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 1024px) { #videoWrapper { max-width: 100vw; padding-bottom: 56.25vw; } } </style> <script> window.videoListRH1 = window.videoListRH1 || ["Lwp1dq-pb1c"]; window.videoIndexRH1 = 0; window.playerRH1 = null; (function () { if (!window.youTubeScriptLoaded) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(tag); window.youTubeScriptLoaded = true; } })(); window.onYouTubeIframeAPIReady = window.onYouTubeIframeAPIReady || function () {}; function loadYouTubePlayerRH1(videoId) { if (window.playerRH1 && typeof window.playerRH1.loadVideoById === "function") { window.playerRH1.loadVideoById(videoId); } else { window.playerRH1 = new YT.Player("player", { videoId: videoId, playerVars: { autoplay: 1, rel: 0, controls: 1, modestbranding: 1, enablejsapi: 1, fs: 1 }, events: { onStateChange: onPlayerStateChangeRH1 } }); } } function onPlayerStateChangeRH1(event) { if (event.data === YT.PlayerState.ENDED) { window.videoIndexRH1++; if (window.videoIndexRH1 < window.videoListRH1.length) { loadYouTubePlayerRH1(window.videoListRH1[window.videoIndexRH1]); } } } </script> <!-- Timed Navigation --> <<timed 20s>> <span class="twine-button center-button">[[RabbitHole HERE->squatrh]]</span> <</timed>> <<timed 5s>> <span class="twine-button right-button">[[How do I RabbitHole?->how2rh]]</span> <</timed>>
<!-- IMAGE BUTTONS FOR VIDEO SEQUENCES --> <div class="sequence-buttons"> <button id="startButton" class="img-button"> <img src="https://github.com/TheRabbitHoleStory/RBTest/blob/main/RH%20start%20button%20Squat!!!.png?raw=true" alt="Start Sequence 1"> </button> <button id="redButton" class="img-button"> <img src="https://github.com/TheRabbitHoleStory/RBTest/blob/main/RH%20red%20button%20Tiger.png?raw=true" alt="Start Sequence 2"> </button> <button id="greenButton" class="img-button"> <img src="https://github.com/TheRabbitHoleStory/RBTest/blob/main/RH%20green%20button%20Kendawg.png?raw=true" alt="Start Sequence 3"> </button> <button id="blueButton" class="img-button"> <img src="https://github.com/TheRabbitHoleStory/RBTest/blob/main/RH%20blue%20button%20Victor.png?raw=true" alt="Start Sequence 4"> </button> <button id="blackButton" class="img-button"> <img src="https://github.com/TheRabbitHoleStory/RBTest/blob/main/RH%20black%20button%20Cary.png?raw=true" alt="Start Sequence 5"> </button> </div> <!-- YOUTUBE PLAYER CONTAINER --> <div id="playerContainer" style="text-align:center; margin-top:20px;"> <div id="videoWrapper"> <div id="player"></div> </div> </div> <style> .sequence-buttons { position: fixed; top: 10px; right: 10px; display: grid; grid-template-columns: auto auto; gap: 10px; z-index: 999; } .img-button { background: none; border: none; padding: 0; cursor: pointer; transition: transform 0.2s ease, filter 0.3s ease; } .img-button img { width: 100px; height: auto; display: block; } .img-button:hover { transform: scale(1.05); filter: drop-shadow(0 0 10px red); } </style> <script> const sequences = { sequence1: ["Lwp1dq-pb1c"], sequence2: ["nop65mPYg4w", "h3LCe9VkxMA", "Yr3ZTRnDeqU", "l8qBFByXhL4", "85B7xQLWvbg", "UpsqqcZdgA8", "qSTq1DhAS2M", "JpfLDz2adHs", "4U6p_quTlJo", "xOwTfCQ4BFM", "HmenzaYt-cI", "Rv2TbZmi6Oo", "WsHyrPF9qJw", "-e1pGYCfiD0"], sequence3: ["h3LCe9VkxMA", "UpsqqcZdgA8", "OgNTXilrX60", "WsHyrPF9qJw", "-e1pGYCfiD0"], sequence4: ["85B7xQLWvbg", "UpsqqcZdgA8", "OgNTXilrX60", "WMj_hVgQ5eY", "7pN1iuSOEu4", "eYAt0gVi1kU"], sequence5: ["l8qBFByXhL4", "85B7xQLWvbg", "qSTq1DhAS2M", "4U6p_quTlJo", "xOwTfCQ4BFM", "HmenzaYt-cI", "Rv2TbZmi6Oo", "WsHyrPF9qJw"] }; let videoIndex = 0; let currentSequence = []; window.player = window.player || null; function loadYouTubePlayer(videoId) { if (window.player && typeof window.player.loadVideoById === "function") { window.player.loadVideoById(videoId); } else { window.player = new YT.Player("player", { videoId: videoId, playerVars: { autoplay: 1, rel: 0, controls: 1, modestbranding: 1, enablejsapi: 1, fs: 1 }, events: { onStateChange: onPlayerStateChange } }); } } function onPlayerStateChange(event) { if (event.data === YT.PlayerState.ENDED) { videoIndex++; if (videoIndex < currentSequence.length) { loadYouTubePlayer(currentSequence[videoIndex]); } } } function startSequence(sequence) { currentSequence = sequence; videoIndex = 0; document.getElementById("playerContainer").style.display = "block"; loadYouTubePlayer(currentSequence[videoIndex]); } document.getElementById("startButton").addEventListener("click", () => startSequence(sequences.sequence1)); document.getElementById("redButton").addEventListener("click", () => startSequence(sequences.sequence2)); document.getElementById("greenButton").addEventListener("click", () => startSequence(sequences.sequence3)); document.getElementById("blueButton").addEventListener("click", () => startSequence(sequences.sequence4)); document.getElementById("blackButton").addEventListener("click", () => startSequence(sequences.sequence5)); if (!window.youtubeScriptAdded) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; const firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); window.youtubeScriptAdded = true; } window.onYouTubeIframeAPIReady = window.onYouTubeIframeAPIReady || function () {}; </script> <!-- Twine Links --> <<timed 10s>> <span class="twine-button left-button">[[RABBITHOLE Here->squatrh2]]</span> <</timed>> <<timed 20s>> <span class="twine-button center-button">[[DELETED SCENE Here->bonussquat]]</span> <</timed>> <<timed 30s>> <span class="twine-button right-button">[[ELDER SCARE Here->hidden]]</span> <</timed>>
<!-- Visible video player container --> <div id="playerContainer" style="text-align:center; margin-top:0;"> <div id="videoWrapper"> <div id="player"></div> </div> </div> <style> #videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ height: 0; overflow: hidden; width: 100%; max-width: 960px; margin: 0 auto; } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 768px), screen and (orientation: portrait) { #videoWrapper { max-width: 100vw; padding-bottom: 56.25%; } #player { width: 100vw; height: 100vh; object-fit: contain; } } </style> <script> (function () { // ✅ Auto-reload fallback if player fails to init setTimeout(() => { if (!window.player || typeof window.player.getPlayerState !== "function") { console.log("Auto-refresh triggered to fix player init"); location.reload(); } }, 2500); // ✅ Prevent duplicate player if (window.player && typeof window.player.destroy === "function") { window.player.destroy(); window.player = null; } // ✅ Load YouTube API only once if (!window.youtubeScriptAdded) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; const firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); window.youtubeScriptAdded = true; } // ✅ Global state window.videoList = window.videoList || ["kgDjFsqbvTM"]; window.videoIndex = 0; // ✅ Create the player function loadYouTubePlayer(videoId) { if (window.player && typeof window.player.loadVideoById === "function") { window.player.loadVideoById(videoId); } else { window.player = new YT.Player("player", { videoId: videoId, playerVars: { autoplay: 1, rel: 0, controls: 1, modestbranding: 1, enablejsapi: 1, fs: 1 }, events: { onStateChange: onPlayerStateChange } }); } } function onPlayerStateChange(event) { if (event.data === YT.PlayerState.ENDED) { window.videoIndex++; if (window.videoIndex < window.videoList.length) { loadYouTubePlayer(window.videoList[window.videoIndex]); } } } // ✅ Set API Ready hook once if (!window.youtubeAPIReadySet) { window.onYouTubeIframeAPIReady = function () { loadYouTubePlayer(window.videoList[window.videoIndex]); }; window.youtubeAPIReadySet = true; } })(); </script> <!-- Twine Link --> <<timed 10s>> <span class="twine-button left-button">[[INDIEGOGO HERE->rhigg]]</span> <</timed>> <<timed 15s>> <span class="twine-button center-button">[[BACK to VIDEO->squatrh]]</span> <</timed>>
<!-- Indiegogo Button --> <p style="text-align:center; margin-top: 40vh;"> <button id="openIGG" class="igg-button">Open Indiegogo</button> </p> <!-- Fallback Link --> <p style="text-align:center;"> If it doesn't open, <a href="https://www.indiegogo.com/projects/elder-scare-arc-rabbithole-indiegogo/coming_soon/x/38444223" target="_blank" class="igg-link">click here to visit it manually</a>. </p> <!-- Style Block --> <style> .igg-button { padding: 14px 28px; font-size: 1.5vw; background: red; color: black; border: 3px solid black; cursor: pointer; text-transform: uppercase; font-weight: bold; box-shadow: 0 0 10px black; transition: all 0.3s ease-in-out; } .igg-button:hover { background: black; color: red; border: 3px solid red; box-shadow: 0 0 10px red; } .igg-link { color: red; font-weight: bold; text-decoration: none; } </style> <!-- Script for Button --> <script> $(document).on("click", "#openIGG", function () { window.open( "https://www.indiegogo.com/projects/elder-scare-arc-rabbithole-indiegogo/coming_soon/x/38444223", "_blank" ); }); </script> <!-- Timed Button --> <<timed 15s>> <span class="twine-button left-button">[[RABBITHOME Here->start]]</span> <</timed>>
<!-- YouTube Player Container --> <div id="playerContainer"> <div id="player"></div> </div> <style> html, body { margin: 0; padding: 0; height: 100%; background: black; overflow: hidden; font-family: system-ui, sans-serif; } #playerContainer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; background: black; } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (orientation: portrait), screen and (max-width: 1024px) { #player { width: 100vw; height: 100vh; object-fit: cover; } } </style> <script> (function () { // ✅ Auto-reload fallback if player doesn't init properly setTimeout(() => { if (!window.player || typeof window.player.getPlayerState !== "function") { console.log("Auto-refresh triggered to fix player init"); location.reload(); } }, 2500); // ✅ Destroy existing player if (window.player && typeof window.player.destroy === "function") { window.player.destroy(); window.player = null; } // ✅ Load YouTube API once if (!window.youTubeScriptLoaded) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(tag); window.youTubeScriptLoaded = true; } // ✅ Set video globals window.videoList = ["Lwp1dq-pb1c"]; window.videoIndex = 0; // ✅ Load and play video function loadYouTubePlayer(videoId) { window.player = new YT.Player("player", { videoId: videoId, playerVars: { autoplay: 1, rel: 0, controls: 1, modestbranding: 1, enablejsapi: 1, fs: 1 }, events: { onStateChange: function (event) { if (event.data === YT.PlayerState.ENDED) { window.videoIndex++; if (window.videoIndex < window.videoList.length) { loadYouTubePlayer(window.videoList[window.videoIndex]); } } } } }); } // ✅ YouTube API Ready window.onYouTubeIframeAPIReady = function () { loadYouTubePlayer(window.videoList[window.videoIndex]); }; })(); </script> <!-- Timed Buttons --> <<timed 785s>> <span class="twine-button right-button">[[INDIEGOGO HERE->rhigg]]</span> <</timed>> <<timed 795s>> <span class="twine-button left-button">[[RABBITHOME Here->start]]</span> <</timed>>
<!-- Visible video player container --> <div id="playerContainer" style="text-align:center; margin-top:0;"> <div id="videoWrapper"> <div id="player"></div> </div> </div> <style> #videoWrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; max-width: 960px; margin: 0 auto; } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 768px), screen and (orientation: portrait) { #videoWrapper { max-width: 100vw; padding-bottom: 56.25%; } #player { width: 100vw; height: 100vh; object-fit: contain; } } </style> <script> (function () { // ✅ Auto-reload if player doesn't init setTimeout(() => { if (!window.player || typeof window.player.getPlayerState !== "function") { console.log("Auto-refresh triggered to fix player init"); location.reload(); } }, 2500); // ✅ Destroy previous player instance if (window.player && typeof window.player.destroy === "function") { window.player.destroy(); window.player = null; } // ✅ Load YouTube API once if (!window.youtubeScriptAdded) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(tag); window.youtubeScriptAdded = true; } window.videoList = window.videoList || ["wMpmtrE5yjo"]; window.videoIndex = 0; function waitForElementAndInitPlayer(retries = 10) { const container = document.getElementById("player"); if (container && typeof YT !== "undefined" && YT && YT.Player) { loadYouTubePlayer(window.videoList[window.videoIndex]); } else if (retries > 0) { setTimeout(() => waitForElementAndInitPlayer(retries - 1), 300); } } window.onYouTubeIframeAPIReady = function () { waitForElementAndInitPlayer(); }; $(document).on(':passagerender', () => { waitForElementAndInitPlayer(); }); function loadYouTubePlayer(videoId) { window.player = new YT.Player("player", { videoId: videoId, playerVars: { autoplay: 1, rel: 0, controls: 1, modestbranding: 1, enablejsapi: 1, fs: 1 }, events: { onStateChange: onPlayerStateChange } }); } function onPlayerStateChange(event) { if (event.data === YT.PlayerState.ENDED) { window.videoIndex++; if (window.videoIndex < window.videoList.length) { loadYouTubePlayer(window.videoList[window.videoIndex]); } } } })(); </script> <<timed 10s>> <span class="twine-button right-button">[[INDIEGOGO HERE->rhigg]]</span> <</timed>> <<timed 30s>> <span class="twine-button center-button">[[POLICE FILE 1->crimefile1]]</span> <</timed>>
<!-- Visible video player container --> <div id="playerContainer" style="text-align:center; margin-top:0;"> <div id="videoWrapper"> <div id="player"></div> </div> </div> <style> #videoWrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; max-width: 960px; margin: 0 auto; } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 768px), screen and (orientation: portrait) { #videoWrapper { max-width: 100vw; padding-bottom: 56.25%; } #player { width: 100vw; height: 100vh; object-fit: contain; } } </style> <script> (function () { // ✅ Auto-reload if player doesn't init setTimeout(() => { if (!window.player || typeof window.player.getPlayerState !== "function") { console.log("Auto-refresh triggered to fix player init"); location.reload(); } }, 2500); // ✅ Destroy previous player instance if (window.player && typeof window.player.destroy === "function") { window.player.destroy(); window.player = null; } // ✅ Load YouTube API once if (!window.youtubeScriptAdded) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(tag); window.youtubeScriptAdded = true; } window.videoList = window.videoList || ["mqDmUGXBh9c"]; window.videoIndex = 0; function waitForElementAndInitPlayer(retries = 10) { const container = document.getElementById("player"); if (container && typeof YT !== "undefined" && YT && YT.Player) { loadYouTubePlayer(window.videoList[window.videoIndex]); } else if (retries > 0) { setTimeout(() => waitForElementAndInitPlayer(retries - 1), 300); } } window.onYouTubeIframeAPIReady = function () { waitForElementAndInitPlayer(); }; $(document).on(':passagerender', () => { waitForElementAndInitPlayer(); }); function loadYouTubePlayer(videoId) { window.player = new YT.Player("player", { videoId: videoId, playerVars: { autoplay: 1, rel: 0, controls: 1, modestbranding: 1, enablejsapi: 1, fs: 1 }, events: { onStateChange: onPlayerStateChange } }); } function onPlayerStateChange(event) { if (event.data === YT.PlayerState.ENDED) { window.videoIndex++; if (window.videoIndex < window.videoList.length) { loadYouTubePlayer(window.videoList[window.videoIndex]); } } } })(); </script> <<timed 10s>> <span class="twine-button left-button">[[INDIEGOGO HERE->rhigg]]</span> <</timed>> <<timed 15s>> <span class="twine-button center-button">[[BACK to VIDEO->squatrh]]</span> <</timed>>
<!-- YouTube Player Container --> <div id="playerContainer"> <div id="player"></div> </div> <style> html, body { margin: 0; padding: 0; height: 100%; background: black; overflow: hidden; font-family: system-ui, sans-serif; } #playerContainer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; background: black; } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Responsive fit to any screen or rotation */ @media screen and (max-width: 1024px), screen and (orientation: portrait) { #player { width: 100vw; height: 100vh; object-fit: cover; } } </style> <script> (function () { // Clean up old player if (window.player && typeof window.player.destroy === "function") { window.player.destroy(); window.player = null; } // Load API once if (!window.youTubeScriptLoaded) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(tag); window.youTubeScriptLoaded = true; } // Set globals window.videoList = ["lLu2o9BpNmQ"]; window.videoIndex = 0; // Init retry logic function initPlayerWhenReady(retries = 15) { const target = document.getElementById("player"); if (target && window.YT && YT.Player) { startVideo(window.videoList[window.videoIndex]); } else if (retries > 0) { setTimeout(() => initPlayerWhenReady(retries - 1), 300); } } // Hook into YouTube API window.onYouTubeIframeAPIReady = function () { initPlayerWhenReady(); }; // Also wait for Twine to finish rendering the passage $(document).on(':passagerender', () => { initPlayerWhenReady(); }); // Create and load the player function startVideo(videoId) { window.player = new YT.Player("player", { videoId: videoId, playerVars: { autoplay: 1, rel: 0, controls: 1, modestbranding: 1, enablejsapi: 1, fs: 1 }, events: { onStateChange: (event) => { if (event.data === YT.PlayerState.ENDED) { window.videoIndex++; if (window.videoIndex < window.videoList.length) { startVideo(window.videoList[window.videoIndex]); } } } } }); } // Auto-refresh fallback if player fails setTimeout(() => { if (!window.player || typeof window.player.getPlayerState !== "function") { console.log("Auto-refresh triggered to fix player init"); location.reload(); } }, 2500); })(); </script> <!-- Timed Link --> <<timed 15s>> <span class="twine-button right-button">[[BACK to VIDEO->squat]]</span> <</timed>>
<!-- Visible video player container --> <div id="playerContainer" style="text-align:center; margin-top:0;"> <div id="videoWrapper"> <div id="player"></div> </div> </div> <style> #videoWrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; max-width: 960px; margin: 0 auto; } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 768px), screen and (orientation: portrait) { #videoWrapper { max-width: 100vw; padding-bottom: 56.25%; } #player { width: 100vw; height: 100vh; object-fit: contain; } } </style> <script> (function () { // ✅ Auto-reload if player doesn't init setTimeout(() => { if (!window.player || typeof window.player.getPlayerState !== "function") { console.log("Auto-refresh triggered to fix player init"); location.reload(); } }, 2500); // ✅ Destroy previous player instance if (window.player && typeof window.player.destroy === "function") { window.player.destroy(); window.player = null; } // ✅ Load YouTube API once if (!window.youtubeScriptAdded) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(tag); window.youtubeScriptAdded = true; } window.videoList = window.videoList || ["VAkOR9KSdow"]; window.videoIndex = 0; function waitForElementAndInitPlayer(retries = 10) { const container = document.getElementById("player"); if (container && typeof YT !== "undefined" && YT && YT.Player) { loadYouTubePlayer(window.videoList[window.videoIndex]); } else if (retries > 0) { setTimeout(() => waitForElementAndInitPlayer(retries - 1), 300); } } window.onYouTubeIframeAPIReady = function () { waitForElementAndInitPlayer(); }; $(document).on(':passagerender', () => { waitForElementAndInitPlayer(); }); function loadYouTubePlayer(videoId) { window.player = new YT.Player("player", { videoId: videoId, playerVars: { autoplay: 1, rel: 0, controls: 1, modestbranding: 1, enablejsapi: 1, fs: 1 }, events: { onStateChange: onPlayerStateChange } }); } function onPlayerStateChange(event) { if (event.data === YT.PlayerState.ENDED) { window.videoIndex++; if (window.videoIndex < window.videoList.length) { loadYouTubePlayer(window.videoList[window.videoIndex]); } } } })(); </script> <<timed 10s>> <span class="twine-button right-button">[[POLICE FILE 2->crimefile2]]</span> <</timed>> <<timed 30s>> <span class="twine-button center-button">[[POLICE FILE 3->crimefile3]]</span> <</timed>>
<!-- Visible video player container --> <div id="playerContainer" style="text-align:center; margin-top:0;"> <div id="videoWrapper"> <div id="player"></div> </div> </div> <style> #videoWrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; max-width: 960px; margin: 0 auto; } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 768px), screen and (orientation: portrait) { #videoWrapper { max-width: 100vw; padding-bottom: 56.25%; } #player { width: 100vw; height: 100vh; object-fit: contain; } } </style> <script> (function () { // ✅ Auto-reload if player doesn't init setTimeout(() => { if (!window.player || typeof window.player.getPlayerState !== "function") { console.log("Auto-refresh triggered to fix player init"); location.reload(); } }, 2500); // ✅ Destroy previous player instance if (window.player && typeof window.player.destroy === "function") { window.player.destroy(); window.player = null; } // ✅ Load YouTube API once if (!window.youtubeScriptAdded) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(tag); window.youtubeScriptAdded = true; } window.videoList = window.videoList || ["-aKBMyNAECg"]; window.videoIndex = 0; function waitForElementAndInitPlayer(retries = 10) { const container = document.getElementById("player"); if (container && typeof YT !== "undefined" && YT && YT.Player) { loadYouTubePlayer(window.videoList[window.videoIndex]); } else if (retries > 0) { setTimeout(() => waitForElementAndInitPlayer(retries - 1), 300); } } window.onYouTubeIframeAPIReady = function () { waitForElementAndInitPlayer(); }; $(document).on(':passagerender', () => { waitForElementAndInitPlayer(); }); function loadYouTubePlayer(videoId) { window.player = new YT.Player("player", { videoId: videoId, playerVars: { autoplay: 1, rel: 0, controls: 1, modestbranding: 1, enablejsapi: 1, fs: 1 }, events: { onStateChange: onPlayerStateChange } }); } function onPlayerStateChange(event) { if (event.data === YT.PlayerState.ENDED) { window.videoIndex++; if (window.videoIndex < window.videoList.length) { loadYouTubePlayer(window.videoList[window.videoIndex]); } } } })(); </script> <<timed 10s>> <span class="twine-button left-button">[[POLICE FILE 3->crimefile3]]</span> <</timed>> <<timed 20s>> <span class="twine-button center-button">[[POLICE FILE 4->crimefile4]]</span> <</timed>> <<timed 30s>> <span class="twine-button right-button">[[POLICE FILE 5->crimefile5]]</span> <</timed>>
<!-- Visible video player container --> <div id="playerContainer" style="text-align:center; margin-top:0;"> <div id="videoWrapper"> <div id="player"></div> </div> </div> <style> #videoWrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; max-width: 960px; margin: 0 auto; } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 768px), screen and (orientation: portrait) { #videoWrapper { max-width: 100vw; padding-bottom: 56.25%; } #player { width: 100vw; height: 100vh; object-fit: contain; } } </style> <script> (function () { // ✅ Auto-reload if player doesn't init setTimeout(() => { if (!window.player || typeof window.player.getPlayerState !== "function") { console.log("Auto-refresh triggered to fix player init"); location.reload(); } }, 2500); // ✅ Destroy previous player instance if (window.player && typeof window.player.destroy === "function") { window.player.destroy(); window.player = null; } // ✅ Load YouTube API once if (!window.youtubeScriptAdded) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(tag); window.youtubeScriptAdded = true; } window.videoList = window.videoList || ["LoMmg0QduNo"]; window.videoIndex = 0; function waitForElementAndInitPlayer(retries = 10) { const container = document.getElementById("player"); if (container && typeof YT !== "undefined" && YT && YT.Player) { loadYouTubePlayer(window.videoList[window.videoIndex]); } else if (retries > 0) { setTimeout(() => waitForElementAndInitPlayer(retries - 1), 300); } } window.onYouTubeIframeAPIReady = function () { waitForElementAndInitPlayer(); }; $(document).on(':passagerender', () => { waitForElementAndInitPlayer(); }); function loadYouTubePlayer(videoId) { window.player = new YT.Player("player", { videoId: videoId, playerVars: { autoplay: 1, rel: 0, controls: 1, modestbranding: 1, enablejsapi: 1, fs: 1 }, events: { onStateChange: onPlayerStateChange } }); } function onPlayerStateChange(event) { if (event.data === YT.PlayerState.ENDED) { window.videoIndex++; if (window.videoIndex < window.videoList.length) { loadYouTubePlayer(window.videoList[window.videoIndex]); } } } })(); </script> <<timed 10s>> <span class="twine-button right-button">[[POLICE FILE 4->crimefile4]]</span> <</timed>> <<timed 30s>> <span class="twine-button center-button">[[POLICE FILE 5->crimefile5]]</span> <</timed>>
<!-- Visible video player container --> <div id="playerContainer" style="text-align:center; margin-top:0;"> <div id="videoWrapper"> <div id="player"></div> </div> </div> <style> #videoWrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; max-width: 960px; margin: 0 auto; } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 768px), screen and (orientation: portrait) { #videoWrapper { max-width: 100vw; padding-bottom: 56.25%; } #player { width: 100vw; height: 100vh; object-fit: contain; } } </style> <script> (function () { // ✅ Auto-reload if player doesn't init setTimeout(() => { if (!window.player || typeof window.player.getPlayerState !== "function") { console.log("Auto-refresh triggered to fix player init"); location.reload(); } }, 2500); // ✅ Destroy previous player instance if (window.player && typeof window.player.destroy === "function") { window.player.destroy(); window.player = null; } // ✅ Load YouTube API once if (!window.youtubeScriptAdded) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(tag); window.youtubeScriptAdded = true; } window.videoList = window.videoList || ["Dd-2CmW_J6E"]; window.videoIndex = 0; function waitForElementAndInitPlayer(retries = 10) { const container = document.getElementById("player"); if (container && typeof YT !== "undefined" && YT && YT.Player) { loadYouTubePlayer(window.videoList[window.videoIndex]); } else if (retries > 0) { setTimeout(() => waitForElementAndInitPlayer(retries - 1), 300); } } window.onYouTubeIframeAPIReady = function () { waitForElementAndInitPlayer(); }; $(document).on(':passagerender', () => { waitForElementAndInitPlayer(); }); function loadYouTubePlayer(videoId) { window.player = new YT.Player("player", { videoId: videoId, playerVars: { autoplay: 1, rel: 0, controls: 1, modestbranding: 1, enablejsapi: 1, fs: 1 }, events: { onStateChange: onPlayerStateChange } }); } function onPlayerStateChange(event) { if (event.data === YT.PlayerState.ENDED) { window.videoIndex++; if (window.videoIndex < window.videoList.length) { loadYouTubePlayer(window.videoList[window.videoIndex]); } } } })(); </script> <<timed 10s>> <span class="twine-button center-button">[[POLICE FILE 5->crimefile5]]</span> <</timed>> <<timed 20s>> <span class="twine-button right-button">[[POLICE FILE 6->crimefile6]]</span> <</timed>> <<timed 30s>> <span class="twine-button left-button">[[TOP SECRET->crimefile8]]</span> <</timed>>
<!-- Visible video player container --> <div id="playerContainer" style="text-align:center; margin-top:0;"> <div id="videoWrapper"> <div id="player"></div> </div> </div> <style> #videoWrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; max-width: 960px; margin: 0 auto; } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 768px), screen and (orientation: portrait) { #videoWrapper { max-width: 100vw; padding-bottom: 56.25%; } #player { width: 100vw; height: 100vh; object-fit: contain; } } </style> <script> (function () { // ✅ Auto-reload if player doesn't init setTimeout(() => { if (!window.player || typeof window.player.getPlayerState !== "function") { console.log("Auto-refresh triggered to fix player init"); location.reload(); } }, 2500); // ✅ Destroy previous player instance if (window.player && typeof window.player.destroy === "function") { window.player.destroy(); window.player = null; } // ✅ Load YouTube API once if (!window.youtubeScriptAdded) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(tag); window.youtubeScriptAdded = true; } window.videoList = window.videoList || ["wkKtnvoKFgo"]; window.videoIndex = 0; function waitForElementAndInitPlayer(retries = 10) { const container = document.getElementById("player"); if (container && typeof YT !== "undefined" && YT && YT.Player) { loadYouTubePlayer(window.videoList[window.videoIndex]); } else if (retries > 0) { setTimeout(() => waitForElementAndInitPlayer(retries - 1), 300); } } window.onYouTubeIframeAPIReady = function () { waitForElementAndInitPlayer(); }; $(document).on(':passagerender', () => { waitForElementAndInitPlayer(); }); function loadYouTubePlayer(videoId) { window.player = new YT.Player("player", { videoId: videoId, playerVars: { autoplay: 1, rel: 0, controls: 1, modestbranding: 1, enablejsapi: 1, fs: 1 }, events: { onStateChange: onPlayerStateChange } }); } function onPlayerStateChange(event) { if (event.data === YT.PlayerState.ENDED) { window.videoIndex++; if (window.videoIndex < window.videoList.length) { loadYouTubePlayer(window.videoList[window.videoIndex]); } } } })(); </script> <<timed 10s>> <span class="twine-button left-button">[[POLICE FILE 6->crimefile6]]</span> <</timed>> <<timed 20s>> <span class="twine-button center-button">[[POLICE FILE 7->crimefile7]]</span> <</timed>> <<timed 30s>> <span class="twine-button right-button">[[TOP SECRET->crimefile8]]</span> <</timed>>
<!-- Visible video player container --> <div id="playerContainer" style="text-align:center; margin-top:0;"> <div id="videoWrapper"> <div id="player"></div> </div> </div> <style> #videoWrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; max-width: 960px; margin: 0 auto; } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 768px), screen and (orientation: portrait) { #videoWrapper { max-width: 100vw; padding-bottom: 56.25%; } #player { width: 100vw; height: 100vh; object-fit: contain; } } </style> <script> (function () { // ✅ Auto-reload if player doesn't init setTimeout(() => { if (!window.player || typeof window.player.getPlayerState !== "function") { console.log("Auto-refresh triggered to fix player init"); location.reload(); } }, 2500); // ✅ Destroy previous player instance if (window.player && typeof window.player.destroy === "function") { window.player.destroy(); window.player = null; } // ✅ Load YouTube API once if (!window.youtubeScriptAdded) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(tag); window.youtubeScriptAdded = true; } window.videoList = window.videoList || ["dGfcQ0StJuI"]; window.videoIndex = 0; function waitForElementAndInitPlayer(retries = 10) { const container = document.getElementById("player"); if (container && typeof YT !== "undefined" && YT && YT.Player) { loadYouTubePlayer(window.videoList[window.videoIndex]); } else if (retries > 0) { setTimeout(() => waitForElementAndInitPlayer(retries - 1), 300); } } window.onYouTubeIframeAPIReady = function () { waitForElementAndInitPlayer(); }; $(document).on(':passagerender', () => { waitForElementAndInitPlayer(); }); function loadYouTubePlayer(videoId) { window.player = new YT.Player("player", { videoId: videoId, playerVars: { autoplay: 1, rel: 0, controls: 1, modestbranding: 1, enablejsapi: 1, fs: 1 }, events: { onStateChange: onPlayerStateChange } }); } function onPlayerStateChange(event) { if (event.data === YT.PlayerState.ENDED) { window.videoIndex++; if (window.videoIndex < window.videoList.length) { loadYouTubePlayer(window.videoList[window.videoIndex]); } } } })(); </script> <<timed 5s>> <span class="twine-button center-button">[[ESCAPE NOW->squatrh2]]</span> <</timed>> <<timed 6s>> <span class="twine-button left-button">[[POLICE FILE 7->crimefile7]]</span> <</timed>> <<timed 8s>> <span class="twine-button right-button">[[TOP SECRET->crimefile8]]</span> <</timed>>
<!-- Visible video player container --> <div id="playerContainer" style="text-align:center; margin-top:0;"> <div id="videoWrapper"> <div id="player"></div> </div> </div> <style> #videoWrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; max-width: 960px; margin: 0 auto; } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 768px), screen and (orientation: portrait) { #videoWrapper { max-width: 100vw; padding-bottom: 56.25%; } #player { width: 100vw; height: 100vh; object-fit: contain; } } </style> <script> (function () { // ✅ Auto-reload if player doesn't init setTimeout(() => { if (!window.player || typeof window.player.getPlayerState !== "function") { console.log("Auto-refresh triggered to fix player init"); location.reload(); } }, 2500); // ✅ Destroy previous player instance if (window.player && typeof window.player.destroy === "function") { window.player.destroy(); window.player = null; } // ✅ Load YouTube API once if (!window.youtubeScriptAdded) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(tag); window.youtubeScriptAdded = true; } window.videoList = window.videoList || ["3TKPTQ0eZ4g"]; window.videoIndex = 0; function waitForElementAndInitPlayer(retries = 10) { const container = document.getElementById("player"); if (container && typeof YT !== "undefined" && YT && YT.Player) { loadYouTubePlayer(window.videoList[window.videoIndex]); } else if (retries > 0) { setTimeout(() => waitForElementAndInitPlayer(retries - 1), 300); } } window.onYouTubeIframeAPIReady = function () { waitForElementAndInitPlayer(); }; $(document).on(':passagerender', () => { waitForElementAndInitPlayer(); }); function loadYouTubePlayer(videoId) { window.player = new YT.Player("player", { videoId: videoId, playerVars: { autoplay: 1, rel: 0, controls: 1, modestbranding: 1, enablejsapi: 1, fs: 1 }, events: { onStateChange: onPlayerStateChange } }); } function onPlayerStateChange(event) { if (event.data === YT.PlayerState.ENDED) { window.videoIndex++; if (window.videoIndex < window.videoList.length) { loadYouTubePlayer(window.videoList[window.videoIndex]); } } } })(); </script> <<timed 10s>> <span class="twine-button center-button">[[TOP SECRET->crimefile8]]</span> <</timed>>
<!-- YouTube Player Container --> <div id="playerContainer"> <div id="player"></div> </div> <style> html, body { margin: 0; padding: 0; height: 100%; background: black; overflow: hidden; font-family: system-ui, sans-serif; } #playerContainer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; background: black; } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (orientation: portrait), screen and (max-width: 1024px) { #player { width: 100vw; height: 100vh; object-fit: cover; } } </style> <script> (function () { // ✅ Auto-reload fallback if player doesn't init properly setTimeout(() => { if (!window.player || typeof window.player.getPlayerState !== "function") { console.log("Auto-refresh triggered to fix player init"); location.reload(); } }, 2500); // ✅ Destroy existing player if (window.player && typeof window.player.destroy === "function") { window.player.destroy(); window.player = null; } // ✅ Load YouTube API once if (!window.youTubeScriptLoaded) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(tag); window.youTubeScriptLoaded = true; } // ✅ Set video globals window.videoList = ["dGfcQ0StJuI"]; window.videoIndex = 0; // ✅ Load and play video function loadYouTubePlayer(videoId) { window.player = new YT.Player("player", { videoId: videoId, playerVars: { autoplay: 1, rel: 0, controls: 1, modestbranding: 1, enablejsapi: 1, fs: 1 }, events: { onStateChange: function (event) { if (event.data === YT.PlayerState.ENDED) { window.videoIndex++; if (window.videoIndex < window.videoList.length) { loadYouTubePlayer(window.videoList[window.videoIndex]); } } } } }); } // ✅ YouTube API Ready window.onYouTubeIframeAPIReady = function () { loadYouTubePlayer(window.videoList[window.videoIndex]); }; })(); </script> <<timed 10s>> <span class="twine-button center-button">[[ESCAPE NOW->squatrh2]]</span> <</timed>>