Mobile Safari on iOS devices is known for its capability to overlay HTML5 <video> on top of everything

Although a similar question was asked 6 years ago without any answers, I am currently facing the same issue.

Problem: The <video> tag in my Angular/Ionic application overlaps my image and two buttons in iOS Mobile Safari - no matter what I try!

It functions correctly in all other browsers I've tested except for 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 file itself is .mov format.

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 have tried everything possible - including adding overflow: visible, adjusting z-index, but nothing seems to work.

https://i.stack.imgur.com/KNejA.png

The video behind the text is playing - the image shows when no person is on screen - displaying what it should normally look like.

In iOS mobile safari, however, the img and buttons do not appear at all - they briefly show for a moment then disappear. Strangely, you can still interact with the invisible buttons on the screen. It's puzzling. Any assistance would be greatly appreciated.

Thank you for any help provided!

htmlcssiosangularmobile-safari

Answer №1

To guarantee the visibility and clickability of buttons above an 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 adjustment in CSS ensures that the video remains behind other content, allowing buttons to remain visible and interactive.

I trust this information is beneficial! Should you require further guidance, do not hesitate to reach out.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to inject services into non-service class instances in Angular 2?

Here is my current approach, but I'm curious about the recommended practice for working with Angular2? ... class MultitonObject { _http: Http; constructor (appInjector: Injector) { this._http = appInjector.get(Http); } } var ap ...

typescriptangular

The border-radius property in Bootstrap buttons causes unwanted white border artifacts to appear

Strange anomalies in the borders of my Bootstrap buttons caught my attention recently. Upon further investigation, I realized that this issue is not linked to my custom styles or theme, as the artifacts can also be seen on the Bootstrap button documentatio ...

csstwitter-bootstrapbootstrap-4bootstrap-5

Customizing the styling of an anchor tag using CSS in Bootstrap

I want my active link to appear red: nav class="navbar navbar-inverse"> <div class="container col-1 col-sm-12"> <ul class="nav"> <li class="<%= 'active' if current_page?(squad_path) %> ...

htmlcssruby-on-rails

MS Edge modifies the attribute's empty value to 1

I have written a JavaScript code to extract values from a list, but in the Windows Edge browser, it returns a value of 1 even when the actual value of the <li> tag is blank. For example: HTML Code <ul> <li value="">Test 1</li&g ...

javascriptjqueryhtmlmicrosoft-edge

Navigating with a Stuck Navigation Bar Using BootstrapretaF

My website has a sticky navbar with a dropdown menu that allows users to jump to different sections of the page. However, I've noticed that when I navigate to a new section, the navbar covers part of the content at the top. After inspecting the navbar ...

htmlcssbootstrap-4

Using jQuery to access the value of the CSS property "margin-left"

I created a JavaScript game with moving divs that have different transition times. The game includes a function that is called every 1/100 seconds, which checks the position of the divs using: $("class1").css("margin-left") Here's the strange part: ...

javascriptjqueryhtmlposition

What could be preventing my bootstrap class from being applied as expected?

As a newcomer to HTML, CSS, and bootstrap, I am struggling with updating my stylesheet values in the preview. This is the button tag that I am working with: <button class="btn btn-primary btn-xl">Find out More</button> However, when ...

htmlcssbutton

When Components in Vue are called in a Single File, certain elements may not be displaying as expected

I have just finished creating my components using Vue 2, Vuetify, and Vue cli - 4.5.15. I attempted to combine them into a Single Vue file but encountered issues with the components not displaying <v-icons>, <v-textfield>, and some other elemen ...

htmlcssvue.jsvue-componentvuetify.js

Keep scrolling! There's no need to worry about reaching the end of the page and having to start over

I'm experiencing an issue where scrolling only works once when the page is initially loaded. I need it to be able to repeat from the beginning each time. <div class="content"> <div class="next-section blue">First Section</div> & ...

jquerycss

The issue observed with the display of the Tabbar Design on iPhone X is causing a

My tabar constraints seem to be working fine on devices like the 8, 6, and 5 series, but on iPhone X the image and title are not displaying correctly. I need help in fixing this issue. Any suggestions? ...

iosswiftuitabbarcontrolleruitabbar

"Enforce a specific height on a div that is exclusively showing a background

I have been trying to use a div element to showcase a specific color, where the background color acts as the content. However, no matter what height or width settings I input, I am unable to achieve the desired size for the div. Even after experimenting w ...

htmlblazorheight

Ways to adjust the font size in the title using HTML

Looking to adjust the text size within an h4 title. Hoping to make some letters smaller than others while keeping all in capital form. Any assistance is greatly appreciated. Thank you! ...

htmlcsswordpress

Testing the unit with a customized header in the interceptor

I've been struggling to execute a unit test within an Angular 6 interceptor, but despite numerous attempts, I keep encountering the following error: Error: Expected one matching request for criteria "Match by function: ", found none. I'm rela ...

javascriptangularunit-testingjasmineangular-http-interceptors

Unveiling the Ultimate Method to Package Angular 2 Application using SystemJS and SystemJS-Builder

I'm currently in the process of developing an application and I am faced with a challenge of optimizing the performance of Angular 2 by improving the loading speed of all the scripts. However, I have encountered an error that is hindering my progress: ...

angulartypescriptgulpsystemjssystemjs-builder

Executing JavaScript function from external SVG file globally

I am working on an HTML page that includes an external JavaScript module <script type="text/javascript" src="js/js.js"></script> and also an external SVG map called "img/map.svg". My goal is to create clickable objects on the map that will t ...

javascriptjqueryhtmlsvg

Is there a way to ensure that the Init method is called every time a ViewController is pushed to a Scene in C

Hello there, I am trying to navigate to a new scene in cocos2d by pushing a view controller. The first time I push to the scene everything works fine. However, when I try to push to the scene a second time, I am unable to update the scene using web service ...

ioscocos2d-iphone

Could a variable (not an element) be defined and controlled within an Angular 2 template?

For instance, envision a scenario where I have a series of input fields and I wish to assign the 'tab' attribute to them sequentially as we move down the page. Rather than hard-coding the tab numbers, I prefer to utilize a method that automatical ...

templatestypescriptangular

Create a CSS popup alert that appears when a button is clicked, rather than using

Is there a way to customize CSS so that the popup alert focuses on a button instead of just appearing like this? I have implemented this type of validation for a text box: <div class="form-group"> <label class="control-label col-sm-3" for="judul ...

javascriptjqueryhtmlcss

Stop SVG Text from Rotating using CSS

I designed an SVG circle containing text and now I would like to apply a CSS transform to rotate the SVG, but without rotating the text element. .progress { webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .progress__value { stroke-d ...

htmlcsssvg

Is it possible for me to add some PHP code to the action of a form?

Within a foreach loop, I have the following code that lists unique codes as links: <a href="" class="charcoal_link" style="line-height: 20px;" onclick="showMessageArea(this); return false;" > <?php echo $uniqueCode1?><span class="pink_tex ...

phphtml