IOS Mobile Safari – HTML5 <video> накладывает все

Я знаю, что есть аналогичный вопрос 6-летней давности, но на него нет ответов, и сейчас я занимаюсь той же проблемой.

Проблема: тег <video> в моем приложении Angular/Ionic накладывает мое изображение и две кнопки в iOS Mobile Safari — независимо от того, что я делаю!

Он работает во всех других браузерах, которые я тестировал, но не в мобильном сафари iOS.

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

Я буквально не знаю, что еще делать — я пробовал добавлять overflow: visible, z-index позиционирование, но ничего.

Воспроизводится видео под текстом — я только что сделал снимок, когда на экране никого не было — но вы можете увидеть изображение и текст того, каким оно должно быть. Вот так это выглядит обычно.

в мобильном Safari на iOS img или buttons ВООБЩЕ не отображаются — они отображаются на короткую секунду, а затем исчезают. Что странно, вы все равно можете нажимать кнопки на экране, даже если они не видны?? Я не знаю. Если кто-нибудь может помочь, это было бы здорово.

Я ценю всю помощь!