I have an embeded youtube player on a website

Here is how it is set up.

• A Youtube embed iFrame is present in markup

<iframe       id="video_1"      class="yt-video"      data-modal-id="vid_modal_1"      src="https://www.youtube.com/embed/Fh1a2K9ZgNA?enablejsapi=1&html5=1&origin=http://d.mydomain"      allowfullscreen=""      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"      width="675"      height="380"      frameborder="0"></iframe>

• The Youtube iframe API is loaded in head
• On window.onload event, YT player is created using this code

  // --- file2.js ---  //  // --- closure code unrelated to this feature ----  // ...  //  window.isYouTubeIframeAPIReady = false;  window.onYouTubeIframeAPIReady = function () {      window.isYouTubeIframeAPIReady = true;  };  function onPlayerReady() {      alert( 'player is ready' );  }  $(window).on('load', function () {      //      // some polling happens here and code only proceeds if      // window.isYouTubeIframeAPIReady is true      //      if( window.isYouTubeIframeAPIReady == true ){          var p = new YT.Player(id, {'events': {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange              }          });      }  }  // --- closure code unrelated to this feature ----  // ...  //

where id is id of the Youtube iFrame.

The Problem

The onReady event callback only fires when the page is hard refreshed (Ctrl+F5). Normal refresh using browser refresh icon or hitting F5 key doesn't fire the onReady event.

Additional Info

The Youtube iframe API javascript file is loaded after file2.js.

Update

Here is the screenshot of the javascript console displaying p (return of new YT.Player(...) when it works.The object has many more methods... The screenshot is not complete

And here it is on the server where it does notScreenshots shows the complete object.