Iframe загружен, но не отображается на Iphone

Question

На моем веб-сайте (https://lauraseiler.com/rise-up-and-shine-university/2019),, который я создал с помощью html, css, javascript и с помощью начальной загрузки, есть кнопка «Воспроизведение», которая удаляет наложение изображения поверх iframe и начинает воспроизведение видео с Vimeo. автоматически. Для этого я использую Javascript. Это работало хорошо и все еще работает на рабочем столе, но в последнее время оно не работает на IPhone. Видео начинает воспроизводиться, но не отображается. Это видно, когда телефон включен в альбомном режиме, но не когда он в портретном режиме.

Я пытался изменить z-индекс iframe и изображения, но это не сработало.

<div class="container0-fluid">
    <div class="header-video">
        <picture class="video-header-img">
            <source media="(max-width: 576px)" srcset="img/sm/bg-masthead.jpg">
            <img data-src="img/lg/bg-masthead.jpg" alt="" class="lazy video-thumbnail-img" data-pin-nopin="no">
        </picture>
        <div class="video-wrapper">
            <iframe
                src="https://player.vimeo.com/video/303572289?api=1&autoplay=0&loop=0&title=0&byline=0&portrait=0&muted=0&player_id=vvimeoVid"
                id="iframePlayer" scrolling="no" webkitallowfullscreen mozallowfullscreen allowfullscreen
                ontouchstart=""></iframe>
        </div>
        <a href="#" class="video-play-header pulse"><img src="img/icons/play2.png"></a>
        <a href="#intro" class="scroll-down js-scroll-trigger" address="true"><span
                class="tooltiptext text-borderTop-bold">Starte
                deine Reise</span></a>
        <img class="rusu-logo" src="img/logo/RUSU_Hauptlogo_gold.png" data-pin-nopin="no">
    </div>
</div>

Я ожидаю, что iframe будет отображаться по центру после нажатия кнопки воспроизведения и удаления изображения, лежащего сверху. Ошибка не возникает в версии iOS для настольных ПК в Chrome или Safari и также работает на телефонах Android.