在我使用html,css,javascript和bootstrap帮助构建的网站(https://lauraseiler.com/rise-up-and-shine-university/2019)上,有一个“播放”按钮,该按钮删除了覆盖在iframe顶部的图像,并开始从Vimeo自动。为此,我使用Javascript。此方法运行良好,并且仍可在桌面上使用,但最近在iPhone上无法使用。视频开始播放,但不可见。当手机在横向模式下打开时可见,而在纵向模式下则看不到。
我试图更改iframe和图片的z索引,但这没用。
<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会居中显示。该错误不会在Chrome或Safari的iOS桌面版中发生,并且也适用于Android手机。