Angular iOS Mobile Safari HTML5视频覆盖一切

我知道6年前也有一个类似的问题，但没有答案，我目前正在处理同样的问题.

Angular/Ironic应用程序中的Issue:<video>标签覆盖了我的图像和iOS Mobile Safari - no matter what I do!中的两个按钮

它适用于我测试过的所有其他浏览器，但不适用于iOS移动Safari.

html:

<ion-row style="height: 87vh; background: black">
        <ion-col style="height: 100%" size="12">
          <div class="outside_home">
            <video playsinline [muted]="true" loop id="video" height="100%" autoplay>
              <source src="{{homeInfo().videoUrl}}" type="video/mp4">
              <source src="{{homeInfo().videoUrl}}" type="video/webm">
              <source src="{{homeInfo().videoUrl}}" type="video/mov">
            </video>
            <div class="inside">
              <ion-grid>
                <ion-row class="ion-text-center ion-justify-content-center">
                  <ion-col size-xs="12" size-sm="10" size-md="8" size-lg="7" size-xl="6">
                    <picture>
                      <source type="image/webp">
                      <img [ngSrc]="homeInfo().homePageTitle" priority="true" alt="" style="min-height: 80px; display: block"
                           width="" height="">
                    </picture>
                  </ion-col>
                </ion-row>
                <ion-row class="ion-text-center">
                  <ion-col size-sm="6" class="ion-text-sm-end" size-xs="12">
                    <div style="padding-right: 3%; padding-left: 3%">
                      <ion-button fill="outline" class="video_text" (click)="navigateToPage('connect')">
                        Connect
                      </ion-button>
                    </div>
                  </ion-col>
                  <ion-col size-sm="6" class="ion-text-sm-start" size-xs="12">
                    <div style="padding-left: 3%; padding-right: 3%">
                      <ion-button fill="outline" class="video_text" (click)="navigateToPage('directions')">
                        Join in Person
                      </ion-button>
                    </div>
                  </ion-col>
                </ion-row>
              </ion-grid>
            </div>
          </div>
        </ion-col>
      </ion-row>

视频本身是一个.mov文件.

这是我的CSS:

div.outside_home {
  display: flex;
  position: absolute;
  width: 100%;
  min-height: 87vh;
  vertical-align: middle;
  justify-content: center;
}

div.inside {
  width: 100%; /* Can be in percentage also. */
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

我真的不知道还能做什么--我try 过添加overflow: visible、z-index位置，但什么也没有.

文本背后的视频正在播放-我刚刚拍了一张屏幕上没有人时的照片-但你可以看到IMG和它应该是什么的文本.这就是它通常看起来的样子.

在iOS移动狩猎中，img或buttons根本不会显示-它显示为brief second，然后消失.奇怪的是，即使屏幕上的按钮不可见，您仍然可以点击它们？？我不知道如果有人能帮忙那就太好了.

我感谢所有帮助！