html – iOS Cellular Safari – HTML5 overlays all the things

I do know there is a related query from 6 years in the past, nevertheless it has no solutions and I am at the moment coping with the identical challenge.

Challenge: <video> tag in my Angular/Ionic utility overlays my picture and two buttons in iOS Cellular Safari – it doesn’t matter what I do!

It really works in all different browsers I’ve examined however not in iOS cellular safari.

html:

<ion-row type="top: 87vh; background: black">
        <ion-col type="top: 100%" dimension="12">
          <div class="outside_home">
            <video playsinline [muted]="true" loop id="video" top="100%" autoplay>
              <supply src="{{homeInfo().videoUrl}}" kind="video/mp4">
              <supply src="{{homeInfo().videoUrl}}" kind="video/webm">
              <supply src="{{homeInfo().videoUrl}}" kind="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">
                    <image>
                      <supply kind="picture/webp">
                      <img [ngSrc]="homeInfo().homePageTitle" precedence="true" alt="" type="min-height: 80px; show: block"
                           width="" top="">
                    </image>
                  </ion-col>
                </ion-row>
                <ion-row class="ion-text-center">
                  <ion-col size-sm="6" class="ion-text-sm-end" size-xs="12">
                    <div type="padding-right: 3%; padding-left: 3%">
                      <ion-button fill="define" class="video_text" (click on)="navigateToPage('join')">
                        Join
                      </ion-button>
                    </div>
                  </ion-col>
                  <ion-col size-sm="6" class="ion-text-sm-start" size-xs="12">
                    <div type="padding-left: 3%; padding-right: 3%">
                      <ion-button fill="define" class="video_text" (click on)="navigateToPage('instructions')">
                        Take part Individual
                      </ion-button>
                    </div>
                  </ion-col>
                </ion-row>
              </ion-grid>
            </div>
          </div>
        </ion-col>
      </ion-row>

The video itself is a .mov file.

Here is my CSS:

div.outside_home {
  show: flex;
  place: absolute;
  width: 100%;
  min-height: 87vh;
  vertical-align: center;
  justify-content: heart;
}

div.inside {
  width: 100%; /* Could be in share additionally. */
  top: auto;
  place: relative;
  show: flex;
  align-items: heart;
  justify-content: heart;
}

I actually do not know what else to do – I’ve tried including overflow: seen, z-index positioning, and nothing.

The video behind the textual content is enjoying – I simply took a pic of when no individual was on display – however you may see the img and the textual content of what it ought to be. That is what it appears like usually.

on iOS cellular safari, the img or buttons do not present up AT ALL- it exhibits for a temporary second after which disappears. What’s odd is you can nonetheless click on the buttons on the display despite the fact that they don’t seem to be seen?? I do not know. If anybody can assist that’d be nice.

I admire all assist!