I have a vimeo embed with background=1 parameter so the controls are not showing and I would like to have a button on mobile that will make the video full screen and rotate it 90 degrees, similar to the functionality in the Youtube app when you click on the Full screen button.

Here's the code I have:

<main>
  <div class="iframe-wrapper">
    <iframe src="https://player.vimeo.com/video/105363047?h=6b97280da1&color=ffffff&title=0&byline=0&portrait=0&background=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
  </div>
  
  <button id="full-screen-mobile">Full Screen</button>
</main>

<style>
main {
  max-width: 640px;
  margin: 0 auto;
}

main.active {
  max-width: 100%;
  height: 100%;
}

.iframe-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.iframe-wrapper.active {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding-top: 0;
}

.iframe-wrapper.active iframe {
  transform: rotate(90deg);
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function ($) {
  $("#full-screen-mobile").on("click", function () {
    $(".iframe-wrapper").addClass("active");
    $("main").addClass("active");
  });
});
</script>

Right now it shows like this:

How can I get the video to show full screen?

Thanks!