video yt api
unknown
html
a year ago
3.7 kB
6
Indexable
Never
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>replit</title> <link href="style.css" rel="stylesheet" type="text/css" /> <style> .popupBox, #stop-button{ opacity: 0; visibility: hidden; position: absolute; z-index: 0; transition: 1s all ease-in; } .popupBox.visible, #stop-button.visible{ opacity: 1; visibility: visible; z-index: 1; } #stop-button { right: 30px; position: absolute!important; } .popupBox iframe { width: 100%; height: 100%; } .popupBox { height: 100vh; width: 100vw; top: 0; left: 0; } body { width: 100vw; height: 100vh; margin: 0; overflow: hidden; } #stop-button.visible { position: absolute; z-index: 999; width: 50px; height: 50px; top: 30px; } </style> </head> <body> <div class="buttons"> <button class="button" id="play-button">Open Popup</button> <button style="display:none;" class="button" id="pause-button">PAUSE</button> <button class="button" id="stop-button">X</button> </div> <div class="popupBox"> <iframe id="video" width="1200" height="707" src="https://www.youtube.com/embed/Fpfvmbeua0w?enablejsapi=1&html5=1 title="I Made a Game about Shrek, it will DESTROY your PC" frameborder="0" allow="accelerometer; autoplay;" allowfullscreen></iframe> </div> <script > var player; const popupBox = document.querySelector(".popupBox"); var stopButton = document.getElementById("stop-button"); function onYouTubePlayerAPIReady() { player = new YT.Player('video', { events: { 'onReady': onPlayerReady } }); } function onPlayerReady(event) { var playButton = document.getElementById("play-button"); playButton.addEventListener("click", function() { player.playVideo(); popupBox.classList.add("visible"); var videoStarted = false; var startTime = 0; var currentTimeBeforePause = 0; var isPaused = false; player.addEventListener("onStateChange", function(event) { if (event.data === 1) { if (!videoStarted) { videoStarted = true; startTime = new Date().getTime() / 1000; isPaused = false; } else if (isPaused) { var currentTimeNow = new Date().getTime() / 1000; var timePaused = currentTimeNow - currentTimeBeforePause; startTime += timePaused; isPaused = false; } } else if (event.data === 2) { if (videoStarted && !isPaused) { currentTimeBeforePause = new Date().getTime() / 1000; isPaused = true; } } }); setInterval(function() { if (videoStarted && !isPaused && ((new Date().getTime() / 1000) - startTime) >= 10) { stopButton.classList.add("visible"); } }, 1000); }); var pauseButton = document.getElementById("pause-button"); pauseButton.addEventListener("click", function() { player.pauseVideo(); }); var stopButton = document.getElementById("stop-button"); stopButton.addEventListener("click", function() { player.stopVideo(); stopButton.classList.remove("visible"); popupBox.classList.remove("visible"); }); } var tag = document.createElement('script'); tag.src = "https://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); </script> </body> </html>