Tengo un vimeo incrustado con el parámetro background=1 , por lo que los controles no se muestran y me gustaría tener un botón en el móvil que haga que el video se muestre a pantalla completa y lo gire 90 grados, similar a la funcionalidad en la aplicación de Youtube cuando haces clic en el botón Pantalla completa.

Aquí está el código que tengo:

 <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>

Ahora mismo se muestra así:

¿Cómo puedo hacer que el video se muestre en pantalla completa?

¡Gracias!