<!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>