How to workaround Firefox's Blocking "draggable" functionality when Controls are visible

Question

Firefox is causing a problem with a video media control where if the controls are enabled then you can't drag the media see this link an extract identifies the problem.

If the user agent exposes a user interface to the user by displaying controls over the media element, then the user agent should suppress any user interaction events while the user agent is interacting with this interface. (For example, if the user clicks on a video's playback control, mousedown events and so forth would not simultaneously be fired at elements on the page.)"

Despite trying various methods to get a workaround I can't seem to get it to work in Firefox. I can't turn off the controls as that gives the user no control but interestingly it will drag successfully while the "big-play-button" is overlayed, but of course once the video plays that button is hidden and the video does not respond to dragging. Chrome, Edge and Brave all work as expected.

The question is how do I add some form of overlay that can be used to drag the video in firefox.

Here is my code

 `<div class="modal-boxes">
   <div id="draggable" class="ui-widget-content" style="display:inline-block;">
      <div id="resizable" >
        <div id="video-container_1" >
           <video id="myPlayer_1" controls disablePictureInPicture preload="auto" width="100%"    height="100%" poster="myPoster " >
              <source id="source_1" src="myVideo.mp4" type='video/mp4'  >
              Your browser does not support HTML5 video.
          </video>          
       </div>           
       <a href="#" id="big-play-button" class="playpause"></a>
       <a href="#" id="big-exit-button" class="exitclose"></a>              
     </div>
   </div>
 </div>`

Javascript code is:

 `$( function() {
    $( "#resizable" ).resizable();
  });

  $( function() {
     $('#draggable').draggable()
  });`

Answer 1

As I had not received any answers I kept digging and finally came up with a solution. This is presented just in case someone else has a similar need.

First create an overlay that has the following CSS class.

.dragOverlay {
   width: 420px;
   height: 225px;
   position: absolute;
   left: 0%;
   right: 0%;
   top: 0%;
   bottom: 25%;  /* So controls don't get masked */
   margin: auto;
   background-size: contain;
   background-position: center;
}

Next insert the hyperlink tag within the videoContainer tag:

<a href="#" id="big-transparent-box_1" class="dragOverlay" ></a>