Error using an Iframe in unload with JS and PHP

I have a web page where I want to capture the event when the browser closes, apparently everything works on the other pages I have, but on the page called personal, I have an iframe where it contains a video. At the moment of loading the page with F5 or Ctrl + F the event is not activated, but if I reload with the browser button it detects the event. Configure my JS so that events such as clicking on a link, submitting a form, this event is not activated, but having an iFrame does activate me. Any idea how to solve this? I thank you in advance.

This is my code:

close.js:

var es_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
var es_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if(es_chrome){
            $(document).ready(function(){ 
            var validNavigations = false;


        $(document).bind('keypress', function(e) {
            if (e.keyCode == 116){
             validNavigations = true;
        }
        });
        $("a").bind("click", function() {
            validNavigations = true;
        });
        $("form").bind("submit", function() {
          validNavigations = true;
        });
        $("input[type=submit]").bind("click", function() {
          validNavigations = true;
        }); 
        $(document).keydown(function(e) {
        if (e.keyCode == 65 && e.ctrlKey) {
            validNavigations = true;
        } 
        });
        $(document).keydown(function(e) {
    if (e.keyCode == 65+17 && e.ctrlKey) {
            validNavigations = true;
        }
        });
              $(document).keydown(function (e) {            
              if (e.key=="F5") {
                    validNavigations = true;
              }
              else if (e.key.toUpperCase() == "W" && prevKey == "CONTROL") {                
                    validNavigations = true;
              }
              else if (e.key.toUpperCase() == "R" && prevKey == "CONTROL") {
                    validNavigations = true;
              }
              else if (e.key.toUpperCase() == "F4" && (prevKey == "CONTROL" || prevKey == "CONTROL")) {
                    validNavigations = true;
              }
          }); 
         $(window).on("unload", function() {

          if (!validNavigations) {   
                           alert("SE CERRARA SESION");               
  
            $.ajax({
            url: 'logout.php'
             });         
           }
          
        });
  });
}else if(es_firefox){
    $(document).ready(function(){  
        var validNavigation = false;
        $(document).bind('keypress', function(e) {
            if (e.keyCode == 116){
                validNavigation = true;
            }
        });
        $("a").bind("click", function() {
            validNavigation = true;
        });


        $("form").bind("submit", function() {
          validNavigation = true;
        });
        $("input[type=submit]").bind("click", function() {
          validNavigation = true;
        }); 
        $(document).keydown(function(e) {
        if (e.keyCode == 65 && e.ctrlKey) {
            validNavigation = true;
        }
    });
       
              $(document).keydown(function (e) {            
              if (e.key=="F5") {
                    validNavigation = true;
              }
              else if (e.key.toUpperCase() == "W" && prevKey == "CONTROL") {                
                    validNavigation = true;
              }
              else if (e.key.toUpperCase() == "R" && prevKey == "CONTROL") {
                    validNavigation = true;
              }
              else if (e.key.toUpperCase() == "F4" && (prevKey == "CONTROL" || prevKey == "CONTROL")) {
                    validNavigation = true;
              }
          });
              
        window.onbeforeunload = function() { 
            if (!validNavigation) { 
             $.ajax({
                  type: 'post',
                   url: 'logout.php',
               });            
           }
        };
  });
  }

personal.php:

     <div class="seccion-video-institucional" id="seccion-video-institucional"> 
        <a class="boton-video-institucional" 
        onclick="f_open_modal('https://player.vimeo.com/video/12334232?h=2334222')"></a>
       </div>  

    <div class="modal fade" id="ModalVideo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="close" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">                    
                <div class="embed-responsive embed-responsive-4by3">
                    <iframe id="iframeVideo" class="myFrame embed-responsive-item" src=""></iframe>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="close" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">Cerrar</span>
                </button>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-3.5.1.min.js"></script>

    <script src="js/close.js"></script> 

<script>

    function f_open_modal(video){
        $('#ModalVideo').modal("show");
        call_modal(video);
                 var validNavigations = true;

    }

    function call_modal(v_video){
        var videoSrc= v_video;
        var iframe=$('#iframeVideo');
        iframe.attr("src", videoSrc+"?autoplay=0"); 
                       var  validNavigations = true;

    }   

    $('#ModalVideo').on('hidden.bs.modal', function (e) {
        var iframe=$('#iframeVideo');
        iframe.removeAttr("src");
                       var  validNavigations = true;

    });
</script>

source https://stackoverflow.com/questions/69003751/error-using-an-iframe-in-unload-with-js-and-php