You will notice that clicking on the play button too soon, and nothing happens. https://jsfiddle.net/jksoe8up/
How the code works is: As soon as a video has loaded, you can click on the cover / play button to start playing.
Here is a timer I added to the code.
I want to find out how many milliseconds it takes until YouTube is ready.
I want the timer to stop on its own when YouTube is ready.
How am I able to do that in the code?
// Intervalvar interval;// Countervar enterDate = new Date();function secondsSinceEnter() { return (new Date() - enterDate) / 1000;}// Event functionfunction evtFct() { var sec = secondsSinceEnter().toFixed(3); if (sec < 10) document.querySelector('button').innerText = sec +" seconds"; else document.querySelector('button').innerText = 'You are here like for eternity';}// Add interval to keep the current time uptodateinterval = setInterval(evtFct, 0); // Call evtFct every tick// Usage exampledocument.querySelector('button').onclick = function () { evtFct(); clearInterval(interval); // Disable interval}// Intervalvar interval;// Countervar enterDate = new Date();function secondsSinceEnter(){ return (new Date() - enterDate) / 1000;}// Event functionfunction evtFct(){ var sec = secondsSinceEnter().toFixed(3); if (sec < 10) document.querySelector('button').innerText = sec +" seconds"; else document.querySelector('button').innerText = 'You are here like for eternity';}// Add interval to keep the current time uptodateinterval = setInterval(evtFct, 0); // Call evtFct every tick// Usage exampledocument.querySelector('button').onclick = function(){ evtFct(); clearInterval(interval); // Disable interval}const manageCover = (function makeManageCover() { const events = {}; function show(el) { el.classList.remove("hide"); } function hide(el) { el.classList.add("hide"); } function openCurtain(cover) { hide(cover); const curtain = document.querySelector(".curtain"); curtain.classList.add("slide"); return curtain; } function showVideo(curtain) { const thewrap = curtain.parentElement.querySelector(".wrap"); show(thewrap); } function coverClickHandler(evt) { const cover = evt.currentTarget; const curtain = openCurtain(cover); showVideo(curtain); cover.dispatchEvent(events.afterClickCover); } function init(callback) { const cover = document.querySelector(".play"); cover.addEventListener("click", coverClickHandler); events.afterClickCover = new Event("afterClickCover"); cover.addEventListener("afterClickCover", callback); } return { init };}());const videoPlayer = (function makeVideoPlayer() { const events = {}; const eventHandlers = {}; let player = null; function loadIframeScript() { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; const firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); } function onYouTubeIframeAPIReady() { const cover = document.querySelector(".play"); const wrapper = cover.parentElement; const frameContainer = wrapper.querySelector(".video"); videoPlayer.addPlayer(frameContainer); } function shufflePlaylist(player) { player.setShuffle(true); player.playVideoAt(0); player.stopVideo(); } function onPlayerReady(event) { player = event.target; player.setVolume(100); shufflePlaylist(player); const iframe = player.h; iframe.dispatchEvent(events.afterPlayerReady); } function addPlayer(video) { const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"; const config = { height: 360, host: "https://www.youtube-nocookie.com", width: 640 }; config.playerVars = { autoplay: 0, cc_load_policy: 0, controls: 1, disablekb: 1, fs: 0, iv_load_policy: 3, loop: 1, playlist, rel: 0 }; config.events = {"onReady": onPlayerReady }; player = new YT.Player(video, config); const iframe = player.h; const eventHandler = eventHandlers.afterPlayerReady; iframe.addEventListener("afterPlayerReady", eventHandler); } function play() { player.playVideo(); } function addEvents(handlers) { eventHandlers.afterPlayerReady = handlers.afterPlayerReady; events.afterPlayerReady = new Event("afterPlayerReady"); } function init(initEventHandlers) { addEvents(initEventHandlers); loadIframeScript(); window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady; } return { addPlayer, init, play };}());videoPlayer.init({ afterPlayerReady: function initCover() { manageCover.init(function playVideo() { videoPlayer.play(); }); }});html,body { height: 100%; margin: 0; padding: 0;}body { background: white; }.container { position: absolute; left: 0; right: 0; min-height: 100%; display: flex;}.curtain { flex: 1 0 0; margin: auto; max-width: 640px; border: 21px solid ; border-radius: 3.2px; border-color: #000 #101010 #000 #101010; position: relative;}.curtain::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: #0a0a0a ; border: 1px solid; border-color: #000 #101010 #000 #101010;}.ratio-keeper { position: relative; height: 0; padding-top: 56.25%; margin: auto; overflow: hidden; outline: 1px solid #333;}.video-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /*animation: fadeInVideo 0s 0s forwards; opacity: 0;*/}/*@keyframes fadeInVideo { 100% { opacity: 1; }}*/iframe { user-select: none;}.panel-left,.panel-right { position: absolute; height: 100%; width: 50%; top: 0%; transition: all 8s ease; transition-delay:300ms; /*background-image: url("https://picsum.photos/600"); background-size: cover; background-repeat: no-repeat; background-position: center;*/ overflow: hidden;}.panel-left { left: 0; /*background-color: rgb(91, 96, 106);*/}.panel-right { right: 0; /*background-color: rgb(229, 211, 211);*/}.panel-left::before,.panel-right::before { content: ""; position: absolute; height: 100%; width: 200%; top: 0; left: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>"); background-size: cover; background-repeat: no-repeat; background-position: 0 0; pointer-events: none;}.panel-right::before { left: -100%;}.curtain.slide .panel-left { /* transform: translateX(-100%);*/ transform: translateX(calc(-100% - 1px));}.panel-left::before { background: rgba(0,0,0,0.5);}.curtain.slide .panel-right { /*transform: translateX(100%);*/ transform: translateX(calc(100% + 1px));}.play { -webkit-appearance: none; appearance: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; display: flex; justify-content: center; align-items: center; width: 90px; height: 90px; border-radius: 50%; cursor: pointer; border: 9px solid blue; background: transparent; filter: drop-shadow(3px 3px 3px #000000b3); color: white; /*animation: fadeInPlay 3s ease 0s forwards;*/ /*animation: fadeInPlay 3s ease 3s forwards;*/ /*opacity: 0;*/ /* pointer-events: none;*/}/*@keyframes fadeInPlay { 100% { pointer-events: initial; opacity: 1; }}*/.play::before { content: ""; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 27px solid blue; transform: translateX(4px);}.play:hover { box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);}.play:focus { outline: 0; box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);}.hide { display: none;}<div class="container"><div class="curtain"><div class="ratio-keeper"><div class="wrap hide"><div class="video video-frame"></div></div><div class="panel-left"></div><div class="panel-right"></div></div></div><button class="play" type="button" aria-label="Open"></button></div>
