iOS Mobile Safari - HTML5 <video> overlays everything

I know there's a similar question from 6 years ago, but it has no answers and I'm currently dealing with the same issue.

Issue: <video> tag in my Angular/Ionic application overlays my image and two buttons in iOS Mobile Safari - no matter what I do!

It works in all other browsers I've tested but not in iOS mobile 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>

The video itself is a .mov file.

Here's my 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;
}

I literally don't know what else to do - I've tried adding overflow: visible, z-index positioning, and nothing.

The video behind the text is playing - I just took a pic of when no person was on screen - but you can see the img and the text of what it should be. That's what it looks like normally.

on iOS mobile safari, the img or buttons don't show up AT ALL- it shows for a brief second and then disappears. What's odd is that you can still click the buttons on the screen even though they aren't visible?? I don't know. If anyone can help that'd be great.

I appreciate all help!

Solution

To ensure buttons are visible and clickable above a element in an Angular/Ionic application on iOS Mobile Safari:

Css:

div.outside_home {
    display: flex;
    position: absolute;
    width: 100%;
    min-height: 87vh;
    vertical-align: middle;
    justify-content: center;
    z-index: 1;   //Changes added

    video {   //Changes added
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
        z-index:-10;
      }
  }

  div.inside {
    width: 100%; 
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

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="https://amazonaws.s3.SampleVideoCheck.mp4" type="video/mp4">
            <source src="https://amazonaws.s3.SampleVideoCheck.mp4" type="video/webm">
            <source src="https://amazonaws.s3.SampleVideoCheck.mp4" 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 src="https://www.gstatic.com/webp/gallery/1.sm.jpg" 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>

This CSS adjustment ensures the video stays behind other content, allowing buttons to be visible and clickable.

Hope this helps! If you need more assistance, feel free to ask.