Unable to interact with content over HTML5 video in iOS -


I have been given a design to implement a lightbox in which there is some content that contains the link, it is all right And when it comes to iOS, except work in addition, it is not possible to interact with the contents of the lightbox if its position is at the top of any video.

It is acting as if the video lightbox is at the top of the content - even if it is behind. This problem is also very simple barebones with HTML

HTML stripped back:

    

Associated stripped styling:

  #lightbox {status: absolute; Top: 0; Left: 0; Width: 100%; Height: 100%; Background: RGBA (255,255,255,0,5); } # Lightbox & gt; A {display: inline-block; Background: Red; Padding: 20px; } #Think {margin-top: 400px; / *   

I have inserted a that contains some js which warnings s when You have successfully clicked a link. On desktop browsers, it is possible to click both links, it is possible to click on the second only on iOS

It is worth noting that the problem arises whether the lightbox is pre-opened on the page or explicitly After opening as

I can think of many ways of hacking around the problem - such as transferring video of the screen, changing it with poster image. To hide it, but I like to leave the video where it is possible if it is.

Did anyone stumble upon this issue and found a solution? Any sign?

This is a curb of mobile safaris, where it has all the touch / click events for the elements at the top Stops only when control is set to activate, regardless of a video element, z-index or DOM order.

Then apply the solution to control and apply your own custom control wit javascript. You can use these intelligence source players to provide you these controls (such as gempliers, videos, etc.), but you need to be careful because some of them are a special case for iOS, where they Players will use the controls. I think this is because it is easier to make those mouse-centered controls work with quirks of iOS (like lack of touch and volume control). So you need to check the document to see if there is a flag in which the player is forced to use his control instead of the built-in people.

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -