You will notice that clicking on the play button too soon, and nothing happens. https://jsfiddle.net/zqrLxevo/
How the code works is: As soon as a video has loaded, click on the cover to start playing.
Is there a way to determine, or find out how many milliseconds it takes until youtube is ready?
How many milliseconds until the play button is able to be clicked?
I think it is higher than 500ms, but how is the number found out?
Is there a way I can attach something to it that will give me a number?
I need to find out what the number is, how am I able to figure that out?
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(); }); }});