Portfolio Single Video Problem with Mobile Browser

hi, I have a problem with "Portfolio Single Video".
The iframe with bg-overlay works on all browsers on my PC, but if I try to run it on android, or other smartphone, the close button of the iframe disappears and the link points directly to the video page (Youtube, Vimeo, Rumble etc etc) skipping the data-lightbox="iframe".
I noticed this error on the analysis tool:
"ima3.js:483 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."
See the screenshoot.
Do you know how to fix it?
Thank you.
My code:

<div class="container"> 
          <!-- Content ============================================= -->
          <section>
            <div> 
              <!-- Portfolio Single Video ============================================= -->
              <div>
                <div><img src="https://sp.rmbl.ws/s8/1/B/F/g/X/BFgXl.qR4e-small-Rapporto-Ufficiale-del-Mini.jpg" alt="Rapporto Ufficiale del Ministero della Difesa Russo 10/07/2023">
                  <div class="bg-overlay">
                    <div class="bg-overlay-content dark animated fadeOut" data-hover-animate="fadeIn" data-bs-theme="dark" style="animation-duration: 600ms;"> <a href="https://rumble.com/embed/v36y0fv/?pub=2pf9kb" class="overlay-trigger-icon bg-light text-dark animated fadeOutUpSmall" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-lightbox="iframe" style="animation-duration: 350ms;"><i class="uil uil-play"></i></a></div>
                    <div class="bg-overlay-bg dark animated fadeOut" data-hover-animate="fadeIn" data-bs-theme="dark" style="animation-duration: 600ms;"></div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!--         fine portfolio--> 
        </div>

Hi,

Thank you for the quick response.

Your solution works fine, now the iframe appears as well as the close button on the mobile browser as well.
However now the overlay play button on the video image disappears, this is not much of a harm really, but if you have a solution for this too that would be nice.

Thanks for the help.

Below the code I entered, so you can see if I made any mistakes.

<div class="container"> 
          <!-- Content ============================================= -->
          <section>
            <div> 
              <!-- Portfolio Single Video ============================================= -->
              <div>
                <div><img src="https://sp.rmbl.ws/s8/1/B/F/g/X/BFgXl.qR4e-small-Rapporto-Ufficiale-del-Mini.jpg" alt="Rapporto Ufficiale del Ministero della Difesa Russo 10/07/2023">
                  <div class="bg-overlay">
                    <div class="bg-overlay-content dark animated fadeOut" data-hover-animate="fadeIn" data-bs-theme="dark" style="animation-duration: 600ms;"> <a href="https://rumble.com/embed/v36y0fv/?pub=2pf9kb" class="overlay-trigger-icon bg-light text-dark animated fadeOutUpSmall" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-lightbox="iframe" data-disable-under="0" style="animation-duration: 350ms;"><i class="uil uil-play"></i></a></div>
                    <div class="bg-overlay-bg dark animated fadeOut" data-hover-animate="fadeIn" data-bs-theme="dark" style="animation-duration: 600ms;"></div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!--         fine portfolio--> 
        </div>