video yt api

mail@pastecode.io avatar
unknown
html
a year ago
3.7 kB
6
Indexable
<!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>