How to embed draggable YouTube video (while playing)

Question

• Goal: Make an embedded YouTube video draggable
• Approach: Using jQuery .draggable() doesn't work directly on the embedded iframe
• Solution: Adding a layer to be used to drag the video, thereby covering the video and removing the possibility to interact with the video
• Question: Is there another way to make it draggable (even while playing) and if not, is this a legit implementation? At least I did not found anything against it in the YouTube terms

$('#wrapper').draggable();
//$('iframe').draggable(); does not work

.overlay {
  position: absolute;
  width: 560px;
  height: 315px;
  background: rgba(0, 0, 0, .5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

<div id="wrapper">
  <!--<div class="overlay"></div> this is needed unfortunately in order for draggable to work -->
  <iframe width="560" height="315" src="https://www.youtube.com/embed/HgvIox6ehkM?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Answer 1

I did something similar and used thumbnail youtube api + YT player. I put the thumbnail with a higher z-index (position:absolute) on the iframe that is below it. When I click the play button I hide the thumbnail (I used custom play button on thumbnail).