<!-- wp:html --> <div style=" max-width:900px; margin:40px auto; padding:8px; background:#0a0a0a; border-radius:18px; border:2px solid #1f1f1f; position:relative; box-shadow: 0px 35px 40px rgba(0,0,0,0.7), 0px 10px 25px rgba(0,0,0,0.5), inset 0 0 10px rgba(255,255,255,0.1); "> <div style="border-radius:10px;overflow:hidden;position:relative;background:#000;"> <!-- Fullscreen Intro Logo --> <div id="introLogo" style=" position:absolute; top:0; left:0; width:100%; height:100%; background:#000; display:flex; justify-content:center; align-items:center; z-index:20; opacity:0; transform: scale(1.2); transition: opacity 1s ease, transform 1s ease; "> <img src="https://athiban.com/wp-content/uploads/2025/10/AthibAn-TV-App-Logo.webp" style="width:50%;max-width:320px;"> </div> <!-- Top-left small logo --> <img src="https://athiban.com/wp-content/uploads/2025/10/AthibAn-TV-App-Logo.webp" style=" position:absolute; top:12px; left:12px; width:80px; opacity:0.90; z-index:10; pointer-events:none; " > <!-- Video --> <video id="mainVideo" controls autoplay playsinline muted=false controlslist="nodownload noplaybackrate" oncontextmenu="return false" style="width:100%;display:block;"> <source src="" type="video/mp4"> </video> <!-- Intro sound --> <audio id="introSound" src="https://athiban.com/wp-content/uploads/2025/10/intro-beep.mp3"></audio> </div> <!-- Power LED --> <div style=" width:8px; height:8px; background:#ff3b3b; border-radius:50%; margin:10px auto 6px; box-shadow:0 0 8px #ff0000; "></div> <!-- NEXT Button --> <div style="text-align:center; margin-top:10px;"> <button id="nextBtn" style=" padding:10px 25px; font-size:16px; border:none; border-radius:8px; background:#ff3b3b; color:#fff; cursor:pointer; box-shadow:0 0 6px rgba(0,0,0,0.5); ">NEXT</button> </div> </div> <script> const video = document.getElementById("mainVideo"); const intro = document.getElementById("introLogo"); const sound = document.getElementById("introSound"); const nextBtn = document.getElementById("nextBtn"); // Playlist of videos const playlist = [ "https://stream.dailyhunt.in/video/a40-ccb19370621f11ebabfb91db1992bd92.mp4", "https://stream.dailyhunt.in/video/a40-ccb19370621f11ebabfb91db1992bd92.mp4" ]; let current = 0; const introDuration = 3000; // 3 sec logo intro function playVideoWithIntro(index) { // Show full-screen logo intro.style.display = "flex"; intro.style.opacity = "1"; intro.style.transform = "scale(1)"; sound.play(); // Set video src but keep hidden behind logo video.src = playlist[index]; video.muted = false; setTimeout(() => { intro.style.opacity = "0"; intro.style.transform = "scale(0.8)"; setTimeout(() => intro.style.display = "none", 1000); video.play(); }, introDuration); } // Initial video play playVideoWithIntro(current); // Auto next video on ended video.addEventListener('ended', () => { current++; if(current >= playlist.length) current = 0; playVideoWithIntro(current); }); // NEXT button click nextBtn.addEventListener('click', () => { current++; if(current >= playlist.length) current = 0; playVideoWithIntro(current); }); </script> <!-- /wp:html -->